Параметр reverse

Параметр reverse является одним из ключевых свойств объекта Scene в библиотеке ScrollMagic и напрямую влияет на поведение сцены при прокрутке страницы. Он определяет, будет ли сцена “откатываться” при прокрутке страницы обратно вверх, когда триггер покидает область видимости.

Синтаксис

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 200,
    reverse: true
});

• triggerElement – элемент, при появлении которого сцена активируется.
• duration – длина сцены в пикселях или процент от высоты экрана.
• reverse – логическое значение (true или false).

Значение true

По умолчанию reverse равен true. Это означает, что все действия сцены будут отменяться при прокрутке назад.

Пример:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300,
    reverse: true
})
.setClassToggle("#animateMe", "visible")
.addTo(controller);

В этом случае, когда пользователь прокручивает страницу вниз и элемент #section1 входит в область сцены, к элементу #animateMe добавляется класс visible. Если пользователь прокручивает страницу обратно вверх, класс удаляется, возвращая элемент в исходное состояние.

Значение false

Если reverse установить в false, действия сцены не будут отменяться при обратной прокрутке. Это удобно для однократных анимаций или эффектов, которые должны срабатывать только один раз.

Пример:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 200,
    reverse: false
})
.setClassToggle("#animateOnce", "active")
.addTo(controller);

В данном случае, как только элемент #section2 активирует сцену, класс active добавляется к элементу #animateOnce и остается добавленным, даже если страница прокручена назад.

Практическое использование с анимациями

Reverse особенно полезен при интеграции с анимационными библиотеками, например GSAP:

var tween = gsap.to("#box", {x: 400, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#triggerBox",
    duration: 500,
    reverse: true
})
.setTween(tween)
.addTo(controller);

• При прокрутке вниз анимация #box выполняется.
• При прокрутке вверх анимация возвращается в исходное состояние благодаря reverse: true.

Если изменить на reverse: false, анимация выполнится один раз и не будет откатываться, что может быть полезно для создания эффектов «входа элемента в сцену» без возврата.

Взаимодействие с duration

Параметр duration влияет на то, как работает reverse.

• Если duration > 0, сцена имеет «протяженность» и класс или анимация активны только в течение этой протяженности, а с обратной прокруткой они будут отменяться при reverse: true.
• Если duration = 0, сцена срабатывает мгновенно, и reverse определяет, будет ли мгновенное действие отменяться при прокрутке вверх.

Пример с протяженной анимацией:

var tween = gsap.to("#line", {width: "100%", duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#startLine",
    duration: 600,
    reverse: true
})
.setTween(tween)
.addTo(controller);

Здесь анимация ширины #line будет увеличиваться по мере прокрутки вниз и уменьшаться обратно при прокрутке вверх.

Частые сценарии использования

1. Анимации при прокрутке вниз/вверх – reverse: true для динамических эффектов.
2. Однократные активации – reverse: false, чтобы элемент оставался в активном состоянии после прохождения сцены.
3. Интерактивные графики – сочетание duration и reverse позволяет создавать «прокручиваемые» анимации с точным контролем над состоянием.
4. Эффекты параллакса – reverse: true обеспечивает плавный откат элементов при прокрутке вверх.

Резюме поведения

reverse – простой, но мощный инструмент, который определяет интерактивность сцены при прокрутке. Его правильная настройка позволяет создавать плавные и предсказуемые анимационные эффекты в ScrollMagic.