jquery - 覆盖 ScrollMagic 中的全局场景选项

Question

我正在尝试使用 ScrollMagic 构建一个网站，但遇到了一个问题:我将反向选项全局定义为 false，并且我似乎无法在特定场景覆盖此选项。

我有几个场景，只需要一两个场景就有反向动画。将反向选项全局设置为 false 并为特定场景设置反向动画会更容易。

这是我的代码:

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

动画不会向后播放，因此场景中设置的反向:true属性似乎不会接管全局设置。

有可能实现这一点吗？希望你能帮我!谢谢!

Answer 1

西娅!

当场景添加到 Controller 时，全局场景选项将被覆盖。
这在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.

因此，您的情况的解决方案是在将场景添加到 Controller 后更改反向选项，如下所示:

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

希望这有帮助。