Стратегии миграции

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

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

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

Пример базовой сцены:

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: 500,
  offset: 100
})
.setTween("#animateBox", { x: 200, opacity: 1 })
.addTo(controller);

В этом примере объект #animateBox будет анимироваться по оси X на 200 пикселей и постепенно появляться, когда страница достигнет позиции #section1 плюс смещение 100px.

Управление анимациями с помощью TweenMax и GSAP

Для плавной анимации ScrollMagic интегрируется с библиотекой GSAP. Метод setTween() позволяет передавать анимацию напрямую в сцену. Можно использовать не только простые свойства CSS, но и сложные анимационные цепочки.

Пример использования цепочки анимаций:

const tween = gsap.timeline()
  .to("#box", { x: 300, duration: 1 })
  .to("#box", { rotation: 360, duration: 1 })
  .to("#box", { scale: 1.5, duration: 1 });

const scene = new ScrollMagic.Scene({
  triggerElement: "#section2",
  duration: 600
})
.setTween(tween)
.addTo(controller);

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

Триггеры и состояния сцены

Сцены ScrollMagic могут реагировать на события:

  • enter — когда сцена активируется при прокрутке вниз.
  • leave — когда сцена покидается.
  • start и end — можно использовать для более точного контроля анимаций.

Пример привязки событий:

scene.on("enter", () => {
  console.log("Сцена активирована");
});
scene.on("leave", () => {
  console.log("Сцена покинута");
});

Также можно использовать методы setClassToggle() для динамического изменения классов:

scene.setClassToggle("#menu", "active");

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

Параллакс-эффекты и прокрутка фоновых элементов

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

gsap.to("#background", { y: "-50%", ease: "none" });

const scene = new ScrollMagic.Scene({
  triggerElement: "#parallaxSection",
  duration: "100%"
})
.setTween("#background", { y: "-50%" })
.addTo(controller);

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

Контроллеры и оптимизация

Все сцены управляются через ScrollMagic Controller, который отслеживает события прокрутки. Важные параметры контроллера:

  • globalSceneOptions — позволяет задать общие настройки для всех сцен.
  • refreshInterval — частота обновления расчётов позиций элементов.

Пример с глобальными настройками:

const controller = new ScrollMagic.Controller({
  globalSceneOptions: { triggerHook: 0.5 }
});

new ScrollMagic.Scene({ triggerElement: "#section3", duration: 300 })
  .setTween("#box3", { x: 200 })
  .addTo(controller);

Такой подход упрощает управление множеством сцен и гарантирует единообразное поведение анимаций на странице.

Интеграция с мобильными устройствами и отзывчивый дизайн

ScrollMagic позволяет динамически обновлять длительность и триггерные элементы в зависимости от размеров окна:

function updateScenes() {
  const width = window.innerWidth;
  scene.duration(width < 768 ? 300 : 600);
}

window.addEventListener("resize", updateScenes);
updateScenes();

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

Работа с несколькими сценами и синхронизация

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

const scene1 = new ScrollMagic.Scene({ triggerElement: "#sec1", duration: 400 })
  .setTween("#elem1", { y: 100 })
  .addTo(controller);

const scene2 = new ScrollMagic.Scene({ triggerElement: "#sec2", duration: 400 })
  .setTween("#elem2", { y: -100 })
  .addTo(controller);

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

Советы по производительности

  • Использовать GSAP вместо прямых изменений CSS через JavaScript — это снижает нагрузку на перерисовку страницы.
  • Минимизировать количество сцен на странице, объединяя анимации через Timeline.
  • Выключать сцены, которые не видны пользователю с помощью scene.enabled(false).
  • Кешировать DOM-элементы и свойства для предотвращения повторных выборок.

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

Расширенные возможности

  • reverse — определяет, будет ли сцена воспроизводиться в обратном направлении.
  • pin — фиксирует элемент на экране на время действия сцены.
scene.setPin("#header");

  • Комбинация pin и tween создаёт сложные композиции с закреплёнными элементами, например, анимированные заголовки или интерактивные баннеры.

  • Поддержка динамических триггеров позволяет изменять активные участки при прокрутке или обновлении DOM:

scene.triggerElement(document.querySelector("#dynamicSection"));
scene.refresh();

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

Оглавление