CODEWITHSUNDEEP
gsapscrollmagic
adam
adam

Reputation: 35

ScrollMagic - set a variable scene

I have a page with multiple similar sections with the class ".imgPanel" that I would like to apply the same animation to each section every time the page scrolls into view.

I don't want to create a new scene for each animation as they are all the same. I know there is a way to create a variable scene (i hope that is the correct terminology), and I am hoping someone can help.

Does anyone know how I would adjust the code below to make that happen. I am sure if I get one example of it with my code below I will be able to understand and use this technique again.

Thanks in advance. Adam.

function scrollMagic() {

if (!Modernizr.touch) {

var controller = new ScrollMagic.Controller({
  duration: "200%",
});

var panelAnim = new TimelineMax();

panelAnim
  .from($('.imgPanel'), 1.4, {
    y: '-50px',
    autoAlpha: 0,
    ease: Power1.easeOut
  }, '-=0.2')

var introScene = new ScrollMagic.Scene({

    duration: "100%",

  })
  .setTween(panelAnim)

  .addTo(controller);

 }
}

Upvotes: 0

Views: 675

Answers (1)

adam
adam

Reputation: 35

I figured it out after watching Ihatetomatoes video

function scrollMagic() {

if (!Modernizr.touch) {

var controller = new ScrollMagic.Controller({
  duration: "100%",
});

$('.imgPanel').each(function(){

  var tween = TweenMax.from($(this), 1.4, { y: '-50px', autoAlpha: 0, 
ease: Power1.easeOut }, '-=0.2');

  var scene = new ScrollMagic.Scene ({
    duration: "100%",
    offset: -300, // offset trigger position by 100px
    triggerElement: this
  })

  .setTween(tween)
  .addTo(controller);

});
}
}

Upvotes: 1

Related Questions