Создание твинов

ScrollMagic не предоставляет встроенного механизма для анимации свойств напрямую. Для этого обычно используется совместно с библиотекой GSAP (GreenSock Animation Platform). Твины (tweens) позволяют создавать плавные анимации свойств элементов, которые запускаются и управляются скроллом. В ScrollMagic твины применяются через объект TweenMax или TweenLite из GSAP, а затем связываются с сценой (Scene).

Подключение GSAP и ScrollMagic

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
  • gsap.min.js — основной модуль GSAP для создания анимаций.
  • ScrollMagic.min.js — ядро ScrollMagic.
  • animation.gsap.min.js — плагин, который позволяет интегрировать твины GSAP в сцены ScrollMagic.

Создание базового твина

Твин создается с помощью gsap.to() или TweenMax.to() (в зависимости от версии GSAP). Основные параметры:

  • Цель анимации — элемент или коллекция элементов.
  • Длительность — время анимации в секундах (для управления скроллом используется duration сцены, а не твина).
  • Свойства анимации — CSS-свойства, которые будут изменяться.

Пример базового твина с GSAP 3:

const tween = gsap.to("#box", { 
  x: 300, 
  opacity: 0.5, 
  duration: 1 
});

Твин изменяет положение элемента с id="box" на 300px по оси X и уменьшает прозрачность до 0.5.

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

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

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
  triggerElement: "#trigger", // элемент, с которого начинается анимация
  duration: 500, // длина анимации в пикселях скролла
  triggerHook: 0.5 // точка срабатывания (0.5 = середина экрана)
})
.setTween(tween)
.addIndicators({name: "Box Tween"}) // для отладки
.addTo(controller);

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

  • triggerElement — элемент на странице, относительно которого начинается сцена.
  • duration — сколько пикселей прокрутки соответствует полной анимации твина.
  • triggerHook — позиция триггера на экране (0 — верх, 1 — низ, 0.5 — центр).
  • setTween() — связывает твин с сценой.

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

Для сложных последовательных анимаций удобно использовать Timeline. В GSAP это gsap.timeline().

const timeline = gsap.timeline();
timeline.to("#box", { x: 200, opacity: 1, duration: 1 });
timeline.to("#box", { y: 100, rotation: 45, duration: 1 });

После создания Timeline его также можно привязать к сцене:

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

Timeline позволяет:

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

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

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

scene.on("enter", () => console.log("Сцена началась"));
scene.on("leave", () => console.log("Сцена закончилась"));
scene.on("progress", (event) => console.log("Прогресс:", event.progress));
  • enter — срабатывает при попадании триггера в зону triggerHook.
  • leave — срабатывает при выходе сцены из зоны.
  • progress — позволяет отслеживать текущий прогресс твина (0–1), что полезно для создания интерактивных эффектов.

Настройка обратного проигрывания и закрепления

Сцена может быть настроена для обратного проигрывания твина:

scene.reverse(true); // true — твин проигрывается обратно при скролле вверх

Для закрепления элемента на экране используется setPin():

scene.setPin("#box"); // фиксирует элемент на время сцены

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

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

  • Использовать transform и opacity вместо top, left для GPU-ускоренной анимации.
  • Ограничивать количество сцен на странице, чтобы не перегружать браузер.
  • Для сложных анимаций использовать Timeline, чтобы уменьшить количество отдельных твинов.

Примеры сложных твинов

Параллакс при скролле:

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

new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: "100%"
})
.setTween(".background", { y: "-50%", ease: "none" })
.addTo(controller);

Анимация нескольких элементов с задержкой:

const tl = gsap.timeline();
tl.from(".item", { y: 50, opacity: 0, stagger: 0.2, duration: 0.8 });

new ScrollMagic.Scene({
  triggerElement: "#list",
  duration: 400,
  triggerHook: 0.7
})
.setTween(tl)
.addTo(controller);

Stagger позволяет создавать каскадную анимацию нескольких элементов с небольшими задержками между ними.

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

Оглавление