ScrollMagic Tween:只播放一次动画

ONY*_*NYX 2 javascript jquery scrollmagic

我想知道当你向下滚动时向前播放动画的方式,向上滚动时没有动画.

var controller = new ScrollMagic.Controller();

var tween_1 = TweenMax.to('#obj_1', 0.5, {
    left: '0%', delay: .1
});

var containerScene = new ScrollMagic.Scene({
    triggerElement: '#scene_1',
    offset: -100
})
.setTween(tween_1)
.addIndicators()
.addTo(controller);
Run Code Online (Sandbox Code Playgroud)

Anw*_*rdo 8

实际上很简单,你设置reverse:false为选项,如下所示:

var controller = new ScrollMagic.Controller();

var tween_1 = TweenMax.to('#obj_1', 0.5, {
     left: '0%', delay: .1
});

var containerScene = new ScrollMagic.Scene({
     triggerElement: '#scene_1',
     offset: -100,
     reverse:false
})
.setTween(tween_1)
.addIndicators()
.addTo(controller);
Run Code Online (Sandbox Code Playgroud)