Синхронизация нескольких сцен

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

Существует несколько ключевых принципов:

  1. Взаимозависимость сцен – одна сцена может запускать другую или изменять её параметры.
  2. Общий контроллер – сцены, находящиеся под управлением одного ScrollMagic.Controller, автоматически синхронизируются относительно прокрутки страницы.
  3. Относительные триггеры и смещения – сцены могут иметь разное положение на странице, но благодаря точной настройке triggerHook и offset их события могут срабатывать синхронно.

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

const controller = new ScrollMagic.Controller();

// Сцена 1
const scene1 = new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: 300,
  triggerHook: 0.5
})
.setClassToggle("#section1", "visible")
.addTo(controller);

// Сцена 2
const scene2 = new ScrollMagic.Scene({
  triggerElement: "#section2",
  duration: 500,
  triggerHook: 0.5
})
.setTween("#section2", { opacity: 1, y: 0 })
.addTo(controller);

Особенности:

  • Обе сцены находятся в одном контроллере, что обеспечивает согласованное поведение при прокрутке.
  • События enter и leave каждой сцены можно использовать для запуска дополнительных анимаций или логики.

Координация анимаций через Timeline

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

const timeline = gsap.timeline();
timeline
  .from("#box1", { duration: 1, x: -200, opacity: 0 })
  .from("#box2", { duration: 1, y: 100, opacity: 0 })
  .from("#box3", { duration: 1, scale: 0, opacity: 0 });

const scene = new ScrollMagic.Scene({
  triggerElement: "#animation-section",
  duration: 800,
  triggerHook: 0.5
})
.setTween(timeline)
.addTo(controller);

Преимущества подхода с Timeline:

  • Возможность задать синхронные и последовательные анимации без создания множества отдельных сцен.
  • Упрощение управления сложными визуальными эффектами, когда элементы должны появляться или изменяться строго по очереди.

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

События enter, leave, progress предоставляют гибкие возможности для управления несколькими сценами.

scene1.on("enter", () => {
  scene2.enabled(true); // активируем вторую сцену при входе в первую
});

scene1.on("leave", () => {
  scene2.enabled(false); // деактивируем вторую сцену при выходе из первой
});

Принципы работы с событиями:

  • enter срабатывает при пересечении триггерной точки, позволяя запускать другие сцены или анимации.
  • leave позволяет останавливать или сбрасывать состояния элементов.
  • progress предоставляет текущий процент прокрутки сцены, что полезно для динамических эффектов или плавной синхронизации нескольких объектов.

Сценарии перекрытия сцен

Перекрытие сцен (overlapping scenes) используется, когда несколько сцен должны управлять одними и теми же элементами или происходить одновременно.

const sceneA = new ScrollMagic.Scene({
  triggerElement: "#overlap1",
  duration: 400,
})
.setTween("#overlap1", { x: 100 })
.addTo(controller);

const sceneB = new ScrollMagic.Scene({
  triggerElement: "#overlap2",
  duration: 400,
})
.setTween("#overlap2", { opacity: 1 })
.addTo(controller);

Тонкости перекрытия:

  • Сцены могут иметь одинаковые или пересекающиеся triggerHook и duration.
  • Для плавной синхронизации часто используют общие timeline или события progress, чтобы управлять состоянием нескольких элементов одновременно.
  • Необходимо внимательно контролировать порядок добавления сцен в контроллер для корректного выполнения анимаций.

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

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

window.addEventListener("resize", () => {
  scene1.duration(window.innerHeight / 2);
  scene2.offset(window.innerHeight / 4);
});

Преимущества:

  • Позволяет адаптировать синхронизацию под разные разрешения и ориентации.
  • Обеспечивает плавность анимаций на страницах с динамическим контентом.

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

  1. Использовать один контроллер на страницу, чтобы все сцены были согласованы.
  2. Разделять сцены на логические группы, чтобы было проще управлять анимациями.
  3. Применять Timeline для последовательных анимаций, особенно если несколько элементов должны анимироваться синхронно.
  4. Использовать события enter, leave, progress для запуска или синхронизации сцен.
  5. Следить за перекрытием триггеров и продолжительностью сцен, чтобы избежать неожиданных конфликтов в анимациях.

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

Оглавление