我正在试图弄清楚如何使用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(带时间轴不工作)
最佳答案 您可以尝试在第二个实现中使用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()方法添加到场景中以查看屏幕上的指示器,这在滚动时可以真正帮助调试.您可以尝试使用持续时间属性来查看是否正常工作.
更新:由于所有粒子需要同时移动,我在每个.add方法调用结束时添加了一个0属性.这可确保在相同位置触发所有补间.您可以在此处阅读有关位置属性的更多信息:
https://greensock.com/asdocs/com/greensock/TimelineLite.html#add()
这次有希望成为一个有效的例子:)
https://codepen.io/anon/pen/ryROrv
希望这可以帮助.干杯.