ScrollMagic - установить переменную сцену

У меня есть страница с несколькими аналогичными разделами с классом «.imgPanel», и я хотел бы применять одну и ту же анимацию к каждому разделу каждый раз, когда страница прокручивается в поле зрения.

Я не хочу создавать новую сцену для каждой анимации, поскольку все они одинаковы. Я знаю, что есть способ создать переменную сцену (надеюсь, это правильная терминология), и надеюсь, что кто-то может помочь.

Кто-нибудь знает, как бы я скорректировал приведенный ниже код, чтобы это произошло. Я уверен, что если я получу один из примеров этого с моим приведенным ниже кодом, я смогу снова понять и использовать эту технику.

Заранее спасибо. Адам.

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);

 }
}

gsap scrollmagic
person adam    schedule 09.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я понял это после просмотра видео Ihatetomatoes

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);

});
}
}
person adam    schedule 09.01.2018