[英]Scrollmagic TimelineMax not animating
I'm trying to figure out how to use TimelineMax with Scrollmagic. 我正在试图弄清楚如何使用Scrollmagic使用TimelineMax。 The problem is easy to explain.
问题很容易解释。
I have similar DOM elements, like particles that have to move slowly than scrolling speed. 我有类似的DOM元素,比如必须比滚动速度慢的粒子。
This first implementation is WORKING (no Timeline) 第一个实现是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);
});
The second implementation is NOT WORKING (uses Timeline) 第二个实现不工作(使用时间轴)
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);
I'd like to make timeline working but elements are not animating. 我想让时间轴工作,但元素不是动画。 They move but with null timing.
他们移动但是没有时间。
Thank you for help 谢谢你的帮助
--- CODEPENS --- --- CODEPENS ---
https://codepen.io/anon/pen/wJOveM (multiple scenes) https://codepen.io/anon/pen/wJOveM (多个场景)
https://codepen.io/anon/pen/dvryog?editors=1111 (w/ timeline NOT WORKING) https://codepen.io/anon/pen/dvryog?editors=1111 (带时间轴不工作)
Can you try to use the TimelineMax .add()
method instead of the .to()
method in you second implementation? 你可以尝试使用TimelineMax
.add()
而不是方法.to()
在你第二次执行方法? So your code should look like this: 所以你的代码应该是这样的:
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);
Also, for better debugging, please add the .addIndicators()
method to the scene to see indicators on the screen, which can really help in debugging while scrolling. 另外,为了更好地调试,请将
.addIndicators()
方法添加到场景中以查看屏幕上的指示器,这在滚动时可以真正帮助调试。 You can try to play with the duration property as well to see if things work properly. 您可以尝试使用持续时间属性来查看是否正常工作。
UPDATE: Since all the particles needed to be moving at the same time, I added a ,0
property at the end of every .add
method call. 更新:由于所有粒子需要同时移动,我在每个
.add
方法调用结束时添加了一个,0
属性。 This ensures that all the tweens are triggered at the same positions. 这可确保在相同位置触发所有补间。 You can read more about the
position
property here: 您可以在此处阅读有关
position
属性的更多信息:
https://greensock.com/asdocs/com/greensock/TimelineLite.html#add() https://greensock.com/asdocs/com/greensock/TimelineLite.html#add()
Here's hopefully a working example this time :) 这次有希望成为一个有效的例子:)
https://codepen.io/anon/pen/ryROrv https://codepen.io/anon/pen/ryROrv
Hope this helps. 希望这可以帮助。 Cheers.
干杯。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.