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!
Szia!
The globalSceneOptions are overwritten when the scene is added to a controller.
This is clearly stated in the documentation:
So the solution in your case is to change the reverse option after you added the scene to the controller, like so:
hope this helps.