Последовательные анимации

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

Создание сцены и привязка к скроллу

Для последовательной анимации первым шагом является создание сцены. Сцена в ScrollMagic — это объект, который связывает триггер с определённой анимацией:

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при достижении которого начинается анимация
    duration: 500,              // длина сцены в пикселях прокрутки
    triggerHook: 0.5            // точка запуска сцены (0 – верх окна, 1 – низ)
})
.setTween("#animate", { y: 100, opacity: 1 }) // простая анимация
.addTo(controller);

Ключевые моменты:

  • triggerElement задаёт начало анимации.
  • duration определяет длительность сцены.
  • triggerHook управляет моментом запуска относительно видимой области окна.

Timeline для последовательных анимаций

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

const timeline = gsap.timeline();

timeline
  .from("#elem1", { y: -50, opacity: 0, duration: 1 })
  .from("#elem2", { x: 100, opacity: 0, duration: 1 }, "-=0.5")
  .from("#elem3", { scale: 0, opacity: 0, duration: 1 }, "-=0.3");

const scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 1000,
    triggerHook: 0.3
})
.setTween(timeline)
.addTo(controller);

Объяснение параметров:

  • "-=0.5" означает, что анимация начнётся за 0.5 секунды до окончания предыдущей.
  • Timeline позволяет управлять порядком, временем начала и перекрытием анимаций.

Контроль состояния и повторение

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

const scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 800,
    reverse: true
})
.setTween(timeline)
.addTo(controller);

reverse: true позволяет анимации «отматываться» назад при прокрутке вверх, создавая плавные интерактивные эффекты.

Разделение анимаций по секциям

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

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

sections.forEach((section, index) => {
    const tl = gsap.timeline();
    tl.from(section.querySelector(".title"), { y: -50, opacity: 0, duration: 1 })
      .from(section.querySelector(".content"), { x: 100, opacity: 0, duration: 1 }, "-=0.5");

    new ScrollMagic.Scene({
        triggerElement: section,
        duration: "50%",
        triggerHook: 0.7
    })
    .setTween(tl)
    .addTo(controller);
});

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

  • Локализация анимаций по секциям упрощает управление большим количеством элементов.
  • Timeline внутри каждой сцены обеспечивает синхронность нескольких анимаций.
  • Динамическая длительность сцены ("50%") делает анимацию пропорциональной высоте секции.

Оптимизация производительности

Для плавной работы на сложных страницах важно учитывать:

  • Использование transform и opacity вместо изменения свойств layout.
  • Минимизация количества одновременно анимируемых элементов.
  • Использование requestAnimationFrame через GSAP для снижения нагрузки на рендер.
gsap.set(".animated", { willChange: "transform, opacity" });

willChange подсказывает браузеру о будущих изменениях и повышает производительность анимаций.

Интерактивные эффекты с pinning

Последовательные анимации часто комбинируются с эффектом pinning, когда элемент фиксируется на экране на время сцены:

new ScrollMagic.Scene({
    triggerElement: "#pin-section",
    duration: 600,
    triggerHook: 0
})
.setPin("#pin-section")
.setTween(timeline)
.addTo(controller);

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

Динамическая адаптация под разные экраны

ScrollMagic позволяет использовать responsive triggerHook и duration, чтобы анимации выглядели одинаково на разных устройствах:

const duration = window.innerHeight * 0.8;

new ScrollMagic.Scene({
    triggerElement: "#responsive",
    duration: duration,
    triggerHook: 0.5
})
.setTween(timeline)
.addTo(controller);

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

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

Оглавление