Анимация положения элементов

ScrollMagic — это библиотека JavaScript, позволяющая связывать скроллинг страницы с анимациями DOM-элементов. Основная идея заключается в создании сцен (Scenes), которые отслеживают положение элементов относительно окна просмотра и запускают заданные анимации.

Для управления положением элементов чаще всего используется комбинация ScrollMagic и библиотеки GSAP (GreenSock Animation Platform), хотя базовые возможности ScrollMagic позволяют также работать с CSS-свойствами напрямую.

Создание контроллера

Перед тем как создавать сцены, необходимо инициализировать контроллер:

var controller = new ScrollMagic.Controller();

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

Основы сцены

Сцена определяется с помощью конструктора ScrollMagic.Scene. Основные параметры:

  • triggerElement — элемент на странице, при достижении которого запускается сцена.
  • duration — длина сцены в пикселях. Если не задана, сцена считается моментальной.
  • triggerHook — положение точки запуска относительно окна просмотра (от 0.0 — верх экрана до 1.0 — низ экрана).

Пример создания сцены:

var scene = new ScrollMagic.Scene({
    triggerElement: "#animateMe",
    duration: 300,
    triggerHook: 0.5
})
.setTween("#animateMe", {y: 100, opacity: 1, duration: 1})
.addTo(controller);

В этом примере:

  • Элемент с id animateMe будет перемещён по оси Y на 100 пикселей при скролле.
  • Сцена длится 300 пикселей скролла.
  • Анимация начинается, когда элемент достигает середины окна (triggerHook: 0.5).

Использование анимаций GSAP

Для сложной анимации чаще всего применяется метод .setTween() с объектом GSAP TweenMax или gsap.to():

var tween = gsap.to("#animateMe", {y: 200, rotation: 45, duration: 1, ease: "power1.out"});

var scene = new ScrollMagic.Scene({
    triggerElement: "#animateMe",
    duration: 500,
    triggerHook: 0.3
})
.setTween(tween)
.addTo(controller);

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

  • Анимация плавно изменяет y-положение и угол поворота элемента.
  • duration сцены определяет, на каком участке скролла анимация будет прогрессировать.
  • triggerHook позволяет синхронизировать точку начала анимации с положением окна.

Привязка позиции к скроллу

Чтобы позиция элемента изменялась пропорционально скроллу, используется настройка длительности сцены (duration). Анимация будет «привязана» к прокрутке:

gsap.to("#box", {
    y: 300,
    ease: "none",
    scrollTrigger: {
        trigger: "#box",
        start: "top center",
        end: "bottom top",
        scrub: true
    }
});

Пояснение ключевых моментов:

  • scrub: true — синхронизация анимации с прокруткой.
  • Элемент будет перемещаться плавно, строго следуя движению скролла.
  • ScrollMagic позволяет аналогично с .setTween(), используя параметр tween вместе с duration сцены.

Использование pinning для закрепления элементов

Для создания эффекта «закрепления» элемента на месте во время скролла применяется метод .setPin():

var scene = new ScrollMagic.Scene({
    triggerElement: "#header",
    duration: 400
})
.setPin("#header")
.addTo(controller);

Результат:

  • Элемент #header остаётся на месте на протяжении 400 пикселей скролла.
  • Pinning можно комбинировать с анимациями для создания эффектов, когда элемент фиксируется и одновременно анимируется.

Множественные анимации и последовательности

Для комплексных анимаций можно объединять несколько твинов в TimelineMax:

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#box",
    duration: 600
})
.setTween(timeline)
.addTo(controller);

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

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

Обработка нескольких элементов

Для анимации группы элементов используется селектор и цикл:

document.querySelectorAll(".item").forEach(function(elem) {
    var scene = new ScrollMagic.Scene({
        triggerElement: elem,
        duration: 200,
        triggerHook: 0.8
    })
    .setTween(gsap.from(elem, {opacity: 0, y: 50, duration: 0.5}))
    .addTo(controller);
});

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

  • Каждому элементу назначается собственная сцена.
  • Анимация запускается по достижении элемента указанной точки скролла.
  • Можно комбинировать с задержкой (delay) или последовательностью для эффектов «поочерёдного появления».

Контроль событий сцены

ScrollMagic позволяет отслеживать события сцены:

  • enter — когда элемент входит в зону триггера.
  • leave — когда элемент покидает зону триггера.
  • progress — прогресс скролла по сцене (от 0 до 1).

Пример:

scene.on("enter", function() {
    console.log("Элемент достиг триггера");
});

scene.on("progress", function(event) {
    console.log("Прогресс сцены:", event.progress);
});

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

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

Для плавной анимации следует учитывать:

  • Использовать transform и opacity, вместо top/left для изменения позиции.
  • Минимизировать количество одновременно активных сцен.
  • Использовать addIndicators() только для отладки, так как это влияет на рендер.

Пример включения индикаторов для отладки:

scene.addIndicators({name: "Box Scene"});

Резюме ключевых возможностей

  • setTween() — привязка анимации к сцене.
  • setPin() — закрепление элемента на месте.
  • triggerElement и triggerHook — контроль точки запуска.
  • duration — определение зоны скролла, на которой анимация активна.
  • TimelineMax/gsap.timeline — последовательные и сложные анимации.
  • События enter/leave/progress — управление поведением элементов в процессе скролла.

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

Оглавление