首先,我是 GSAP 和 ScrollMagic 的新手,如果我在这里问了一个愚蠢的问题,请原谅我。我一直在寻找互联网,但没有成功找到我的问题的正确答案。
无论如何,我正在尝试创建一个时间线,在每个“to”函数的完成上,将使用特定参数调用外部函数。
var controller = new ScrollMagic.Controller();
var timeline = new TimelineLite();
var div = $('div');
timeline.to(div, 0.5, {
opacity: 0,
onComplete: toggleOverlay(0)
}, "part-1")
.to(div, 0.5, {
opacity: 1,
onComplete: toggleOverlay(1)
}, "part-2")
.to(div, 0.5, {
opacity: 0,
onComplete: toggleOverlay(2)
}, "part-3");
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger-event",
duration: 500
})
.setTween(timeline)
.addTo(controller);
function toggleOverlay(i){
console.log(i);
}
这里发生了什么:一旦滚动位置到达'#trigger-event',时间线将被调用。随后,将根据触发事件之后和结束(持续时间)之前的滚动位置调用“.to”函数。
我在这里面临的问题是 onComplete 函数是在页面加载时直接调用的。这可能与“.setTween(timeline)”有关,我可以想象它会加载到整个时间线中。
我的问题的解决方案是什么,或者什么是好的替代方法?
编辑:这是一个 JSFiddle:https ://jsfiddle.net/04db5ja5/
谢谢你, 恩齐奥