Overwriting global scene options in ScrollMagic

Question

I'm trying to build a site with ScrollMagic, and I have a problem: I define the reverse option to be false globally and I'm seemingly not able to overwrite this option at a specific scene.

I have several scenes and only need one or two scenes to have reverse animation. It would be much easier to have the reverse option false globally and set the reverse animation for the specific scenes.

Here's my code:

var controller;
$(document).ready(function($) {
    controller = new ScrollMagic({
        globalSceneOptions: {
            reverse: false
        }
    });
});

. . .

$(document).ready(function($) {
    var tween = TweenMax.from("#works_macbook_top", 1, 
        { rotationX: -80, ease: Sine.easeOut }
    );
    var scene = new ScrollScene({triggerElement: ".works .graphic", duration: 250, offset: -100, reverse: true})
                    .setTween(tween)
                    .addTo(controller);
    scene.addIndicators();
});

The animation doesn't play backwards, so the reverse: true property set at the scene doesn't seem to take over the global setting.

Is it possible to make this happen? Hope you can help me! Thanks!

Answer 1

Szia!

The globalSceneOptions are overwritten when the scene is added to a controller.
This is clearly stated in the documentation:

When a scene is added to the controller the options defined using the ScrollScene constructor will be overwritten by those set in globalSceneOptions.

So the solution in your case is to change the reverse option after you added the scene to the controller, like so:

var scene = new ScrollScene({triggerElement: ".works .graphic", duration: 250, offset: -100})
    .setTween(tween)
    .addTo(controller)
    .reverse(true) // <- change option after adding to controller
    .addIndicators();

hope this helps.