Question

我正在试图弄清楚如何在Scrollmagic中使用TimelineMax。问题很容易解释。

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

第一个实现是WORKING（没有时间轴）

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

我想让时间轴工作，但元素不是动画。他们移动但是没有时间。

感谢您的帮助

--- CODEPENS ---

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()方法添加到场景中以查看屏幕上的指示符，这在滚动时可以真正帮助调试。您可以尝试使用持续时间属性来查看是否正常工作。

更新：由于所有粒子需要同时移动，我在每个,0方法调用结束时添加了.add属性。这可确保在相同位置触发所有补间。您可以在此处详细了解position属性：

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

这次希望是一个有效的例子：）

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

希望这会有所帮助。欢呼声。

Scrollmagic TimelineMax没有动画效果

1 个答案: