Привязка анимации к сцене

Библиотека ScrollMagic позволяет управлять анимацией элементов на странице, привязывая её к положению скролла. Центральным элементом является сцена (Scene) — объект, который определяет, когда и как происходит анимация. Сцена создаётся с помощью конструктора ScrollMagic.Scene и настраивается через параметры: triggerElement, duration, offset, triggerHook.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при достижении которого срабатывает сцена
    duration: 200,              // длина сцены в пикселях скролла
    offset: 50,                 // смещение точки срабатывания сцены
    triggerHook: 0.5            // точка на экране (0 - верх, 1 - низ)
});
  • triggerElement — основной триггер, относительно которого определяется момент начала сцены.
  • duration — длина сцены, определяет период действия анимации. Если значение равно 0, анимация срабатывает моментально.
  • offset — смещение относительно triggerElement, задаётся в пикселях.
  • triggerHook — позиция на экране, при достижении которой срабатывает сцена. Значение от 0 (верх экрана) до 1 (низ экрана).

Добавление анимации к сцене

Для управления анимацией вместе со сценой используется метод setTween(), который связывает сцену с объектом анимации, например, созданным с помощью библиотеки GSAP (GreenSock Animation Platform).

var tween = gsap.to("#box", {duration: 1, x: 300, rotation: 360});
scene.setTween(tween);

В этом примере элемент с ID box будет перемещаться на 300 пикселей вправо и вращаться на 360° в течение всей длины сцены.

Ключевые моменты работы setTween:

  • Анимация синхронизируется с прокруткой страницы.
  • Если сцена имеет duration > 0, анимация будет прогрессировать пропорционально позиции скролла.
  • При duration = 0 анимация срабатывает мгновенно при достижении триггера.

События сцены

Сцена может реагировать на различные события с помощью методов on() и off().

scene.on("enter", function (event) {
    console.log("Сцена активирована");
});

scene.on("leave", function (event) {
    console.log("Сцена деактивирована");
});

Основные события:

  • enter — срабатывает при входе в область сцены.
  • leave — срабатывает при выходе из области сцены.
  • start — момент начала сцены (аналогично enter).
  • end — момент завершения сцены.

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

Позиционирование сцены

Параметр triggerHook управляет вертикальным положением триггера на экране:

triggerHook: 0    // верх экрана
triggerHook: 0.5  // центр экрана
triggerHook: 1    // низ экрана

Сцену можно динамически перемещать, изменяя её offset:

scene.offset(100); // сдвигает триггер на 100px вниз

Комбинация triggerHook и offset позволяет точно настраивать момент срабатывания анимации в зависимости от дизайна страницы.

Множественные анимации на одной сцене

Сцену можно привязать к нескольким анимациям одновременно, используя Timeline GSAP. Это особенно удобно для комплексных последовательностей.

var timeline = gsap.timeline();
timeline.to("#box", {x: 200, duration: 1});
timeline.to("#circle", {y: 100, duration: 1});

scene.setTween(timeline);

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

  • Управление несколькими элементами одновременно.
  • Возможность последовательного выполнения анимаций.
  • Синхронизация с длиной сцены ScrollMagic.

Закрепление элементов на экране

Метод setPin() позволяет «закреплять» элемент на время сцены, создавая эффект параллакса или фиксированного блока при скролле.

scene.setPin("#header");
  • Элемент остаётся на месте до окончания сцены.
  • Можно комбинировать с анимацией через setTween().
  • Позволяет создавать сложные визуальные эффекты без использования CSS position: sticky.

Интеграция с другими библиотеками

ScrollMagic тесно интегрируется с GSAP, что позволяет создавать динамичные анимации, синхронизированные со скроллом. Также поддерживаются события для управления классами CSS, работа с jQuery и обычными DOM-элементами.

scene.on("enter", function () {
    document.querySelector("#box").classList.add("active");
});

Практические советы

  • Для сложных страниц рекомендуется использовать Controller, который управляет всеми сценами:
var controller = new ScrollMagic.Controller();
scene.addTo(controller);
  • Контроллер обеспечивает правильное обновление сцен при изменении размера окна или динамическом контенте.
  • Следует избегать слишком большого количества сцен с анимациями, чтобы не перегружать браузер.

Итоговое сочетание

Привязка анимации к сцене в ScrollMagic строится на трёх компонентах: Controller → Scene → Tween/Timeline. Такой подход позволяет:

  • точно задавать момент начала анимации;
  • синхронизировать прогресс анимации с прокруткой;
  • комбинировать несколько анимаций и событий;
  • создавать закрепленные элементы и параллакс-эффекты.

Эффективное использование этих инструментов обеспечивает гибкую и плавную анимацию, полностью контролируемую пользователем через скролл.

Оглавление