Question

我试图使用ScrollMagic构建一个网站，我遇到了一个问题：我将反向选项定义为全局假，我似乎无法在特定场景覆盖此选项。 / p>

我有几个场景，只需要一个或两个场景就可以进行反向动画。将全局反向选项设置为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

Szia！

将场景添加到控制器时会覆盖globalSceneOptions 这在the documentation中明确说明：

当一个场景添加到控制器时，使用ScrollScene构造函数定义的选项将被globalSceneOptions中设置的选项覆盖。

所以你的情况下的解决方案是在将场景添加到控制器之后更改反向选项，如下所示：

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

希望这会有所帮助。

在ScrollMagic中覆盖全局场景选项

1 个答案: