Параллельные анимации

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

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

Создание параллельных анимаций через Timeline

// Инициализация контроллера ScrollMagic
var controller = new ScrollMagic.Controller();

// Создание таймлайна для параллельных анимаций
var timeline = gsap.timeline();

// Добавление параллельных анимаций
timeline.to("#box1", {x: 200, duration: 2}, 0)  // начало анимации в момент 0
        .to("#box2", {y: 150, duration: 2}, 0)  // синхронная анимация с box1
        .to("#box3", {opacity: 0.5, duration: 2}, 0); // параллельная анимация

// Привязка таймлайна к сцене ScrollMagic
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400,  // длина анимации относительно скролла
    triggerHook: 0.5
})
.setTween(timeline)
.addTo(controller);

Объяснение ключевых моментов:

  • timeline.to(..., 0) — третий параметр 0 устанавливает синхронный старт всех анимаций в одном моменте таймлайна. Если задать разные значения, анимации будут смещены во времени.
  • duration внутри to() управляет фактической длительностью анимации, но ScrollMagic масштабирует её относительно duration сцены.
  • triggerHook задаёт точку на экране, где начинается анимация (0 — верх страницы, 1 — низ страницы).

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

Для более сложных параллельных анимаций можно добавлять смещения, чтобы анимации начинались почти одновременно, но с небольшим лагом:

timeline.to("#box1", {x: 200, duration: 2}, 0)
        .to("#box2", {y: 150, duration: 2}, 0.3)  // начнется чуть позже
        .to("#box3", {scale: 1.5, duration: 2}, 0.5);

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

Группировка анимаций по логическим блокам

При больших проектах параллельные анимации удобно структурировать:

// Анимации для заголовков
var headersTimeline = gsap.timeline();
headersTimeline.from(".header", {y: -50, opacity: 0, stagger: 0.2});

// Анимации для блоков контента
var contentTimeline = gsap.timeline();
contentTimeline.from(".content-item", {x: -100, opacity: 0, stagger: 0.3});

// Общий таймлайн
var mainTimeline = gsap.timeline();
mainTimeline.add(headersTimeline, 0)
            .add(contentTimeline, 0);  // обе группы стартуют одновременно

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

Параллельные анимации с разной продолжительностью

Можно комбинировать элементы с различной длительностью в одном таймлайне:

timeline.to("#box1", {x: 300, duration: 3}, 0)
        .to("#box2", {y: 200, duration: 1.5}, 0)
        .to("#box3", {rotation: 360, duration: 2}, 0);

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

Контроль параллельных анимаций через события сцены

ScrollMagic предоставляет методы для реагирования на события прокрутки:

scene.on("enter", function () {
    console.log("Параллельные анимации запущены");
});

scene.on("leave", function () {
    console.log("Анимации завершены или прокручены обратно");
});

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

Рекомендации по производительности

  • Использовать will-change: transform для элементов с CSS-анимацией, чтобы браузер оптимизировал отрисовку.
  • Объединять мелкие анимации в один таймлайн, чтобы уменьшить количество Scene.
  • Минимизировать тяжелые свойства (например, box-shadow) для плавного скролла.

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

Оглавление