Обратный прогресс

В ScrollMagic обратный прогресс (reverse progress) используется для управления анимациями при скролле в обоих направлениях. Это означает, что когда пользователь прокручивает страницу вверх, анимация может возвращаться к своему исходному состоянию. Этот механизм особенно полезен для плавных переходов и интерактивных эффектов, где важно синхронизировать состояние элементов с положением скролла.

Настройка сцены с обратным прогрессом

В ScrollMagic сцена создается через ScrollMagic.Scene. Ключевым свойством для обратного прогресса является reverse. По умолчанию оно включено (true), что позволяет анимации возвращаться при прокрутке вверх.

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1", // элемент, который запускает сцену
    duration: 300,               // длина сцены в пикселях
    triggerHook: 0.5,            // точка срабатывания на экране (0 — верх, 1 — низ)
    reverse: true                 // включение обратного прогресса
})
.setTween("#animateElement", {opacity: 1, x: 100}) // анимация GSAP или CSS
.addTo(controller);

При reverse: true элемент будет возвращаться в исходное состояние при скролле вверх. Если reverse: false, анимация выполнится один раз и не будет отменяться.

Использование событий сцены для контроля прогресса

ScrollMagic предоставляет события enter, leave, start, end и progress. Для реализации обратного прогресса особенно полезно событие progress, которое позволяет отслеживать текущее состояние сцены как дробное значение от 0 до 1.

scene.on("progress", function(event) {
    console.log("Текущий прогресс сцены: " + event.progress);
});

event.progress изменяется динамически при прокрутке страницы вверх и вниз, что дает возможность синхронизировать сложные анимации с положением скролла.

Сложные анимации с обратным прогрессом

Для интеграции с библиотеками анимации, такими как GSAP, обратный прогресс позволяет строить двунаправленные анимационные эффекты.

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

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

Здесь объект #box будет двигаться и вращаться вперед при скролле вниз, и возвращаться в исходное положение при скролле вверх. Это обеспечивает естественный отклик анимации на действия пользователя, без резких переходов.

Обратный прогресс и pinning элементов

Сцену можно закрепить с помощью метода .setPin(), сохраняя элемент на экране на время действия сцены. При этом обратный прогресс также работает корректно:

scene.setPin("#pinnedElement", {pushFollowers: false});

Опция pushFollowers: false предотвращает сдвиг последующих элементов. Элемент будет оставаться закрепленным, и при скролле вверх он вернется в исходное положение, если сцена настроена с reverse: true.

Управление динамическими эффектами через обратный прогресс

Обратный прогресс позволяет комбинировать несколько анимаций, реагирующих на прокрутку. Например, можно изменять масштаб и прозрачность одновременно:

var tween = gsap.timeline()
    .to("#circle", {scale: 2, duration: 1})
    .to("#circle", {opacity: 0.5, duration: 1}, 0);

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

Timeline GSAP синхронизируется с прогрессом сцены, а обратный прогресс обеспечивает плавное возвратное движение при скролле вверх.

Применение обратного прогресса для интерактивных интерфейсов

Обратный прогресс критически важен в интерфейсах с параллаксом, анимациями текста, графикой и переходами между секциями. Использование progress позволяет:

  • Синхронизировать несколько сцен между собой.
  • Изменять свойства CSS в зависимости от позиции скролла.
  • Управлять сложными графическими эффектами без задержек и рывков.

Пример динамического изменения цвета элемента:

scene.on("progress", function(event) {
    var value = event.progress;
    document.querySelector("#colorBox").style.backgroundColor = `rgba(255, 0, 0, ${value})`;
});

Цвет плавно изменяется при скролле вниз и возвращается обратно при прокрутке вверх.

Обратный прогресс в ScrollMagic — это инструмент для создания интерактивного, двунаправленного управления анимациями, который обеспечивает полный контроль над поведением элементов при прокрутке. Он интегрируется с любой анимационной библиотекой, поддерживает закрепление элементов и позволяет реализовать сложные визуальные эффекты с точной синхронизацией с положением скролла.

Оглавление