Использование прогресса для анимаций

В ScrollMagic объект Scene предоставляет возможность отслеживать прогресс прокрутки относительно заданного триггера и продолжительности сцены. Прогресс сцены изменяется от 0 до 1 в зависимости от того, насколько пользователь прокрутил элемент, связанный с триггером. Это ключевой инструмент для создания плавных анимаций, синхронизированных с прокруткой страницы.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, с которого начинается сцена
    duration: 500 // длина сцены в пикселях
})
.addTo(controller);

scene.on("progress", function (event) {
    console.log(event.progress); // значение от 0 до 1
});

Значение event.progress позволяет динамически управлять любыми свойствами элементов, например, прозрачностью, масштабом или положением.

Связывание прогресса с GSAP-анимациями

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

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

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

При использовании метода .setTween() ScrollMagic автоматически синхронизирует прогресс прокрутки с прогрессом анимации GSAP. Это позволяет создать «скролл-зависимую» анимацию без дополнительной логики.

Реализация кастомных анимаций через событие прогресса

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

scene.on("progress", function(event) {
    var progress = event.progress;
    document.querySelector("#circle").style.transform = `scale(${0.5 + 0.5 * progress})`;
    document.querySelector("#circle").style.opacity = progress;
});

В этом примере масштаб и прозрачность элемента плавно изменяются пропорционально прогрессу прокрутки, создавая эффект «живой» анимации.

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

Для более сложных сцен с несколькими элементами можно использовать прогресс для запуска различных анимаций в зависимости от диапазона прокрутки:

scene.on("progress", function(event) {
    var progress = event.progress;

    if (progress < 0.33) {
        gsap.to("#box1", { x: 100 * progress });
    } else if (progress < 0.66) {
        gsap.to("#box2", { y: 200 * (progress - 0.33) });
    } else {
        gsap.to("#box3", { rotation: 360 * (progress - 0.66) });
    }
});

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

Прогресс и pinning элементов

ScrollMagic позволяет «закреплять» элементы на экране при прокрутке с помощью метода .setPin(). В сочетании с прогрессом это открывает возможности для сложных интерактивных эффектов:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    duration: 800
})
.setPin("#pinnedElement")
.addTo(controller);

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

Закрепленный элемент может плавно изменять свои свойства в зависимости от прокрутки, создавая визуально выразительные эффекты.

Комбинирование нескольких сцен с прогрессом

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

var scene1 = new ScrollMagic.Scene({ triggerElement: "#section1", duration: 400 })
    .on("progress", e => { /* анимация для section1 */ })
    .addTo(controller);

var scene2 = new ScrollMagic.Scene({ triggerElement: "#section2", duration: 600 })
    .on("progress", e => { /* анимация для section2 */ })
    .addTo(controller);

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

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

Прогресс от 0 до 1 можно масштабировать или модифицировать с помощью функций интерполяции для создания нелинейных анимаций:

scene.on("progress", function(event) {
    var easedProgress = Math.pow(event.progress, 2); // квадратичное ускорение
    document.querySelector("#box").style.transform = `translateX(${easedProgress * 300}px)`;
});

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

Практические советы

  • Прогресс сцены всегда находится в диапазоне от 0 до 1 и меняется непрерывно.
  • Использование .setTween() упрощает синхронизацию с GSAP-анимациями, но ручной контроль через progress дает больше гибкости.
  • Для длинных или сложных сцен рекомендуется разбивать анимации на сегменты, чтобы облегчить управление прогрессом.
  • Кастомная интерполяция позволяет создавать разнообразные динамические эффекты, не ограничиваясь линейной зависимостью от прокрутки.

Эти подходы открывают широкие возможности для создания интерактивных и выразительных анимаций, полностью управляемых прокруткой страницы.

Оглавление