Группировка сцен

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

Создание сцен и необходимость группировки

Сцена создаётся через конструктор ScrollMagic.Scene:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 200,
    offset: 50
})
.setClassToggle("#animate", "active")
.addTo(controller);

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

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

Простейший способ группировки — хранение сцен в массиве:

var scenes = [];

for (var i = 1; i <= 5; i++) {
    var scene = new ScrollMagic.Scene({
        triggerElement: "#section" + i,
        duration: 300,
        offset: 0
    })
    .setClassToggle("#section" + i, "visible")
    .addTo(controller);
    
    scenes.push(scene);
}

Массив scenes позволяет:

  • Легко перебрать все сцены в цикле.
  • Добавить или удалить сцены динамически.
  • Применять общие методы к каждой сцене, например .destroy() или .reverse().

Создание пользовательских групп сцены

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

function createSectionScenes(sections) {
    var group = [];
    sections.forEach(function(section) {
        var scene = new ScrollMagic.Scene({
            triggerElement: section,
            duration: 400
        })
        .setClassToggle(section, "active")
        .addTo(controller);
        group.push(scene);
    });
    return group;
}

var sections = ["#sec1", "#sec2", "#sec3"];
var sectionScenes = createSectionScenes(sections);

Такой подход обеспечивает масштабируемость и читаемость кода.

Применение общих настроек к группе

Часто требуется, чтобы все сцены группы имели одинаковые настройки:

sectionScenes.forEach(function(scene) {
    scene.reverse(false); // Отключает реверс для всех сцен
});

Кроме того, можно использовать функции для массовой модификации сцены, например:

function setGlobalDuration(group, duration) {
    group.forEach(function(scene) {
        scene.duration(duration);
    });
}

setGlobalDuration(sectionScenes, 500);

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

Объединение с контроллером

Контроллер (ScrollMagic.Controller) остаётся единым для всех сцен, но через группировку можно динамически добавлять и удалять сцены:

sectionScenes.forEach(function(scene) {
    controller.addScene(scene);
});

// Позже можно удалить все сцены группы
sectionScenes.forEach(function(scene) {
    scene.remove();
});

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

Взаимодействие между сценами внутри группы

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

sectionScenes.forEach(function(scene, index) {
    scene.on("enter", function() {
        sectionScenes.forEach(function(s, i) {
            if(i !== index) s.removeClassToggle("active");
        });
    });
});

Это создаёт координированное поведение, имитирующее слайдер или пошаговую анимацию.

Использование Timeline с группой сцен

Для более сложной анимации сцены можно объединять с GSAP Timeline и назначать всем сценам один общий таймлайн:

var timeline = gsap.timeline();

sectionScenes.forEach(function(scene, index) {
    timeline.to("#section" + (index + 1), {opacity: 1, duration: 1});
    scene.setTween(timeline);
});

Такой подход позволяет:

  • Согласованно анимировать все элементы.
  • Использовать синхронные эффекты.
  • Упрощать управление временными параметрами анимации.

Резюме по группировке

  • Группы сцен создаются через массивы или пользовательские функции.
  • Общие действия применяются к группе через циклы forEach.
  • Позволяет управлять множеством сцен централизованно.
  • Обеспечивает динамическое добавление и удаление сцен.
  • Поддерживает взаимодействие сцен внутри группы.
  • Идеально сочетается с таймлайнами GSAP для синхронных анимаций.

Группировка сцен делает ScrollMagic масштабируемым и позволяет создавать сложные прокрутки без дублирования кода.

Оглавление