CODEWITHSUNDEEP
javascriptjqueryscrollmagic
ONYX
ONYX

Reputation: 5859

ScrollMagic Tween: play animation only once going forward

I want to know how you have the animation only play once going forward when you scroll down and when you scroll up there is no animation.

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

Upvotes: 3

Views: 6750

Answers (1)

Anwardo
Anwardo

Reputation: 710

It's pretty easy actually, you set reverse:false as option, like so:

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

Upvotes: 13

Related Questions