ScrollMagic - 设置可变场景答案

【问题标题】：ScrollMagic - set a variable sceneScrollMagic - 设置可变场景
【发布时间】：2018-01-09 10:42:23
【问题描述】：

我有一个页面，其中包含多个类似部分的“.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

【解决方案1】：

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

});
}
}

【讨论】：