Reset scene on reverse

[richardadc]

I have a few 0 duration scenes that i would not like to play back in reverse but instead just reset back to their start positions. Is there a way of achieving this in ScrollMagic?

[brettmcm]

I have the same need. Has any solution been found for this?

[codemonkeynorth]

I assume this example is similar to your problem.

• if i scroll down my bar tweens from -27% (offscreen) to 0%
• if i scroll back up the page my bar stays where it is at 0%, since reverse is false (required behaviour)
• if i then scroll down again, my bar X doesn't first reset to -27%, on the first trigger and therefore doesn't tween on again on the 2nd trigger

setting reverse: true seems to stop the tween running forward again

var barTween = TweenMax.to($bar, 0.5, {x:'0%'});
var barTweenReset = TweenMax.to($bar, 0.1, {x:'-27%'})

var scene =  new ScrollMagic.Scene({triggerElement: "#trigger1",  reverse: true})
    .setTween(barTweenReset)
    .addTo(controller); 

var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger2", triggerHook:'onLeave', reverse: false})
    .setTween(barTween)
    .addTo(controller);

would be grateful for any advice, thanks

[cvn]

I had the same problem, and I found a way to reset the scene with the start event.

var myTween = TweenMax.to('.myContent', 1, {y: 100});

var myScene = new ScrollMagic.Scene({triggerElement: '#myTrigger'})
        .setTween(myTween)
        .on('start', function (event) {
            myTween.time(0);
        });

The start event is fired when scrolling in either direction passed the start position. So we're resetting the tween when entering and exiting. There are also other events that may be a better fit for your needs.

Here's a demo.