ScrollMagic setClassToggle Persistance?

Question

I'm using the setClassToggle() method from ScrollMagic. The idea is that when you scroll down pass a trigger, you can add a css class to an element. And if you scroll up pass a trigger, it will remove the class from the element. As described in documentation here:

http://scrollmagic.io/docs/ScrollMagic.Scene.html#setClassToggle

Eg.

scene.setClassToggle("#my-elem", "myclass");

However, I do NOT want the class removed when you scroll up pass the trigger. I only want the class added and PERSIST after you scroll down pass the trigger. How do I get Scroll Magic to behave in this manner? Is it even possible?

Answer 1

You need to set reverse to be false. Its set true by default maybe

reverse: false

http://scrollmagic.io/docs/ScrollMagic.Scene.html#reverse

Answer 2

Update

The event.scrollDirection is what you're looking for.

var myScene = new ScrollMagic.Scene({
        ...
    })
    .on('start', function (event) {
        // only run on scroll down
        if(event.scrollDirection == 'FORWARD') {
            // do things here, like adding a class
        }
    })
    .addTo(controller);

---

Original

The scene end event seems to have this effect. The following snippet adds a class name that persists whether scrolling up or down after the scene was initially completed. (This example uses jQuery to easily add a class.)

var myScene = new ScrollMagic.Scene({
        ...
    })
    .on('end', function(event) {
        $('body').addClass('my-class');
    })
    .addTo(controller);