Создание серии сцен

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

Определение и инициализация контроллера

Для управления сценами необходимо создать контроллер:

var controller = new ScrollMagic.Controller();

Контроллер выполняет функции:

  • Управление временем жизни сцен;
  • Координация нескольких сцен на одной странице;
  • Поддержка различных видов прокрутки (вертикальной и горизонтальной).

Каждая сцена добавляется в контроллер методом .addTo(controller).

Создание первой сцены

Сцена определяется объектом ScrollMagic.Scene, которому передаются параметры:

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

Ключевые параметры сцены:

  • triggerElement — DOM-элемент, с которого начинается сцена;
  • duration — продолжительность эффекта, измеряемая в пикселях прокрутки;
  • offset — дополнительное смещение начала сцены;
  • triggerHook — положение на экране, где срабатывает триггер (0 — верх, 1 — низ, 0.5 — центр).

Сцена может быть привязана к анимации через TweenJS или GSAP:

scene.setTween("#animateDiv", 0.5, {opacity: 1, y: -50});
scene.addTo(controller);

Создание серии сцен

Чтобы сцены работали последовательно, необходимо учитывать их позиционирование относительно триггеров и продолжительности. Существует несколько подходов:

1. Серия сцен с разными триггерами

Каждая сцена привязывается к своему элементу:

var scenes = [
    new ScrollMagic.Scene({triggerElement: "#section1", duration: 300}).setClassToggle("#section1", "visible"),
    new ScrollMagic.Scene({triggerElement: "#section2", duration: 400}).setClassToggle("#section2", "visible"),
    new ScrollMagic.Scene({triggerElement: "#section3", duration: 500}).setClassToggle("#section3", "visible")
];

scenes.forEach(scene => scene.addTo(controller));

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

2. Серия сцена с нарастающей продолжительностью

Если требуется эффект прокрутки через несколько элементов как единой сцены, можно объединять элементы в одну сцену:

var combinedScene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: document.querySelector("#section1").offsetHeight + document.querySelector("#section2").offsetHeight
})
.setTween("#combinedAnimation", {x: 200})
.addTo(controller);

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

Управление порядком сцен

Серии сцен часто требуют синхронизации событий. ScrollMagic предоставляет методы:

  • on("enter", callback) — вызывается при входе в сцену;
  • on("leave", callback) — вызывается при выходе из сцены;
  • reverse() — задает, должна ли сцена проигрываться в обратном направлении при прокрутке вверх.

Пример последовательного включения классов:

var sections = document.querySelectorAll(".section");
sections.forEach((section, i) => {
    new ScrollMagic.Scene({triggerElement: section, duration: 200})
        .on("enter", function() {
            section.classList.add("active");
            if(i > 0) sections[i-1].classList.remove("active");
        })
        .addTo(controller);
});

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

При создании серии сцен важно учитывать количество одновременно активных сцен. Большое число сцен может замедлять прокрутку. Рекомендуется:

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

Интеграция с GSAP

ScrollMagic часто используется вместе с GSAP для плавных анимаций. Создание серии сцен с GSAP выглядит так:

var timeline = gsap.timeline();
timeline.to("#box1", {x: 100, duration: 1})
        .to("#box2", {y: 50, duration: 1})
        .to("#box3", {opacity: 0.5, duration: 1});

new ScrollMagic.Scene({
    triggerElement: "#container",
    duration: 1000,
    triggerHook: 0.5
})
.setTween(timeline)
.addTo(controller);

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

Выводы по серии сцен

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

  • Плавные последовательные анимации;
  • Взаимозависимые эффекты при прокрутке;
  • Контролируемые визуальные истории на странице.

Главное — правильно планировать триггеры, длительности и порядок сцен, а также оптимизировать количество одновременно активных сцен для плавности работы страницы.

Оглавление