Перезапись глобальных параметров сцены в 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

Szia!

GlobalSceneOptions перезаписываются при добавлении сцены в контроллер.
Это четко указано в документации:

Когда сцена добавляется в контроллер, параметры, определенные с помощью конструктора 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();

надеюсь это поможет.