javascript - Scrollmagic TimelineMax 没有动画

Question

我正在尝试了解如何将 TimelineMax 与 Scrollmagic 一起使用。这个问题很容易解释。

我有类似的 DOM 元素，比如移动速度必须比滚动速度慢的粒子。

第一个实现是可行的(没有时间表)

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
$particles.each(function() {
    var tween = TweenMax.to($(this), 1, { y: -100, ease: Linear.easeNone });
    var scene = new ScrollMagic.Scene({
        triggerElement: ".wrapper",
        duration: 1000
    });
    scene.setTween(tween);
    scene.addTo(controller);
}); 

第二个实现不工作(使用时间轴)

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
    timeline.to($(this), 1, {  y: -200, ease: Linear.easeNone });
});
var scene = new ScrollMagic.Scene({
    triggerElement: ".wrapper",
    duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);

我想让时间轴正常工作，但元素没有动画效果。它们移动但时间为零。

谢谢你的帮助

---代码笔---

https://codepen.io/anon/pen/wJOveM (多场景)

https://codepen.io/anon/pen/dvryog?editors=1111 (时间线不工作)

Answer 1

您可以尝试在第二次实现中使用 TimelineMax .add() 方法而不是 .to() 方法吗？所以你的代码应该是这样的:

var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
    timeline.add(TweenMax.to($(this), 1, {  y: -200, ease: Linear.easeNone }),0);
});
var scene = new ScrollMagic.Scene({
    triggerElement: ".wrapper",
    duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);

另外，为了更好的调试，请在场景中添加.addIndicators()方法来查看屏幕上的指示器，这对于在滚动时进行调试非常有帮助。您也可以尝试使用 duration 属性，看看是否一切正常。

更新:因为所有粒子都需要同时移动，所以我在每个 .add 方法调用的末尾添加了一个 ,0 属性。这确保所有补间都在相同位置触发。您可以在此处阅读有关 position 属性的更多信息:

https://greensock.com/asdocs/com/greensock/TimelineLite.html#add()

希望这次有一个有效的例子:)

https://codepen.io/anon/pen/ryROrv

希望这对您有所帮助。干杯。