Анимация поворота

ScrollMagic — это библиотека для управления анимацией при скролле страницы. Один из самых востребованных эффектов — анимация поворота элементов. Она позволяет вращать объекты плавно, синхронизируя вращение с прокруткой страницы.

Настройка сцены

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

var controller = new ScrollMagic.Controller();

Сцена (ScrollMagic.Scene) определяет, когда и как запускается анимация. Основные параметры для анимации поворота:

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

Пример создания сцены для поворота элемента на 360°:

var rotateScene = new ScrollMagic.Scene({
  triggerElement: "#rotate-target",
  duration: 500,
  triggerHook: 0.5
})
.setTween("#rotate-target", {rotation: 360, ease: Linear.easeNone})
.addTo(controller);

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

  • rotation: 360 — полное вращение на 360 градусов.
  • ease: Linear.easeNone — линейная анимация без ускорения и замедления.
  • addTo(controller) — добавление сцены в контроллер, чтобы она отслеживалась при скролле.

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

ScrollMagic тесно интегрируется с GSAP (GreenSock Animation Platform), что позволяет создавать сложные и плавные вращения:

var tween = gsap.to("#rotate-target", {
  rotation: 720,
  duration: 2,
  ease: "power1.inOut"
});

var scene = new ScrollMagic.Scene({
  triggerElement: "#rotate-target",
  duration: 800,
  triggerHook: 0.5
})
.setTween(tween)
.addIndicators({name: "rotate scene"})
.addTo(controller);

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

  • rotation: 720 — двойное вращение элемента.
  • ease: "power1.inOut" — ускорение в начале и замедление в конце анимации.
  • addIndicators() — отладочные маркеры для визуализации сцены (только для разработки).

Анимация с зависимостью от прокрутки

С помощью ScrollMagic можно синхронизировать вращение с прокруткой, а не просто проигрывать анимацию во времени. Для этого используется duration сцены. Пример:

var rotateTween = gsap.to("#rotate-target", {rotation: 360, ease: "none"});

var rotateScene = new ScrollMagic.Scene({
  triggerElement: "#rotate-target",
  duration: 1000
})
.setTween(rotateTween)
.addTo(controller);

В этом примере элемент будет вращаться на 360° на протяжении 1000 пикселей скролла. Чем больше duration, тем медленнее вращение.

Вращение нескольких элементов

Для одновременного вращения нескольких объектов можно использовать групповой селектор или массив элементов:

gsap.utils.toArray(".rotate-elements").forEach(function(elem) {
  var tween = gsap.to(elem, {rotation: 360, ease: "linear"});
  
  new ScrollMagic.Scene({
    triggerElement: elem,
    duration: 500
  })
  .setTween(tween)
  .addTo(controller);
});

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

  • gsap.utils.toArray() — позволяет работать с любым количеством элементов.
  • Каждому элементу создается собственная сцена, что гарантирует независимое вращение.

Вращение с дополнительными эффектами

Можно комбинировать поворот с другими свойствами, например, масштабированием, прозрачностью или смещением:

var combinedTween = gsap.to("#rotate-target", {
  rotation: 360,
  scale: 1.5,
  opacity: 0.5,
  ease: "power2.inOut"
});

new ScrollMagic.Scene({
  triggerElement: "#rotate-target",
  duration: 600
})
.setTween(combinedTween)
.addTo(controller);

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

Динамическое управление вращением

Можно изменять угол вращения в реальном времени в зависимости от пользовательского скролла или событий:

window.addEventListener("scroll", function() {
  var scrollPos = window.scrollY;
  var rotationAngle = scrollPos % 360;
  gsap.to("#rotate-target", {rotation: rotationAngle, duration: 0});
});

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

  • Используется scrollY % 360 для ограничения угла от 0 до 360°.
  • duration: 0 — мгновенное применение без анимации времени, полностью привязанное к скроллу.

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

  • Использовать transform: rotate() через GSAP вместо изменения стилей вручную.
  • Минимизировать количество сцен с короткой длительностью, чтобы не перегружать контроллер.
  • Для сложных анимаций применять will-change: transform в CSS для улучшения рендеринга.

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

Оглавление