Цепочки сцен

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

var controller = new ScrollMagic.Controller();

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300
})
.setClassToggle("#section1", "visible");

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 300
})
.setClassToggle("#section2", "visible");

controller.addScene([scene1, scene2]);

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

Связывание сцен через события

Для создания более сложных цепочек часто применяются события .on() и .off() в сценах. Например, активация одной сцены может запускать анимацию другой:

scene1.on("enter", function() {
    scene2.trigger();
});

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

Использование timeline для цепочек

Для синхронизации нескольких анимаций удобно использовать GSAP Timeline вместе с ScrollMagic. Timeline позволяет объединить несколько анимаций в одну последовательность и привязать её к одной сцене:

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

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

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

Контроль последовательности сцен

Для контроля порядка сцены можно добавлять через массив в controller.addScene() или создавать сцены динамически. Важным моментом является правильная настройка triggerElement и offset:

var sections = document.querySelectorAll(".section");

sections.forEach((section, index) => {
    new ScrollMagic.Scene({
        triggerElement: section,
        offset: index * 100,
        duration: 300
    })
    .setClassToggle(section, "active")
    .addTo(controller);
});

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

Взаимодействие с анимациями и CSS

ScrollMagic хорошо сочетается с CSS-анимациями через setClassToggle и JS-анимациями через setTween. В цепочках сцен это особенно полезно для:

  • Постепенного появления элементов (fade-in, slide-in)
  • Изменения положения объектов (translate, rotate)
  • Синхронизации нескольких анимаций с разной длительностью
var scene = new ScrollMagic.Scene({
    triggerElement: "#feature",
    duration: 400
})
.setClassToggle("#feature", "highlight")
.setTween(gsap.to("#feature img", {scale: 1.2}))
.addTo(controller);

Комбинация setClassToggle и setTween позволяет создать цепочку, где визуальные эффекты и JS-анимации срабатывают одновременно и согласованно.

Динамическое управление цепочками

С помощью методов .addTo(), .remove(), .destroy() можно управлять цепочкой сцен в реальном времени, например, удалять сцену из цепочки при изменении условий:

scene1.on("leave", function() {
    controller.removeScene(scene2);
});

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

Резюме по цепочкам сцен

  • Использование одного Controller для всех сцен обеспечивает согласованность.
  • События .on() позволяют связывать сцены в каскадные цепочки.
  • GSAP Timeline помогает управлять порядком и длительностью анимаций.
  • Динамическое создание сцен через массивы упрощает масштабирование проекта.
  • Комбинация CSS и JS-анимаций делает цепочки визуально насыщенными.
  • Методы управления сценами позволяют адаптировать цепочки под условия страницы.

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

Оглавление