Анимация transform

ScrollMagic — это мощная библиотека для управления анимацией элементов в зависимости от прокрутки страницы. Одним из ключевых инструментов для создания динамических эффектов является анимация CSS-свойства transform. Она позволяет изменять положение, масштаб, вращение и наклон элементов без перерисовки всего DOM, что делает анимации плавными и производительными.

Создание сцены с трансформацией

Для анимации элемента необходимо создать сцену (Scene) и прикрепить её к контроллеру:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // Элемент, при котором начинается анимация
    duration: 500,              // Длительность анимации в пикселях прокрутки
    offset: 0                   // Смещение начала анимации
})
.setTween("#animate", {       // Цель анимации
    transform: "translateX(200px) rotate(45deg) scale(1.5)"
})
.addTo(controller);

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

  • triggerElement определяет, когда сцена начнет анимацию.
  • duration задает, на каком участке прокрутки анимация будет происходить.
  • setTween может принимать как объект CSS-свойств, так и полноценный Tween от библиотеки GSAP для более сложных эффектов.

Применение нескольких трансформаций

CSS transform допускает одновременное использование нескольких функций: translate, rotate, scale, skew. В ScrollMagic их можно комбинировать:

.setTween("#animate", {
    transform: "translateY(100px) rotateX(30deg) scale(0.8) skewY(10deg)"
});

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

Анимация через GSAP

Для более гибкой анимации рекомендуется использовать GSAP с ScrollMagic. Она позволяет задавать промежуточные ключевые точки и плавные кривые скорости:

var tween = gsap.to("#animate", {
    y: 300,
    rotation: 360,
    scale: 2,
    duration: 1,
    ease: "power1.inOut"
});

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

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

  • Возможность задавать кривые анимации (ease).
  • Поддержка цепочек и обратных анимаций.
  • Контроль прогресса анимации через прокрутку.

Анимация при входе и выходе из зоны видимости

ScrollMagic позволяет делать анимацию «появление» и «исчезновение» при скролле:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    triggerHook: 0.8, // Начало анимации, когда элемент почти внизу экрана
    duration: "50%"
})
.setTween("#element", {
    transform: "translateY(0px) scale(1)",
    opacity: 1
})
.addTo(controller);
  • triggerHook определяет точку начала анимации относительно видимой области.
  • Можно комбинировать с opacity, чтобы элемент плавно проявлялся при прокрутке.

Контроль прогресса анимации

С помощью событий ScrollMagic можно отслеживать прогресс и изменять трансформацию динамически:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400
})
.on("progress", function(e) {
    var progress = e.progress; // значение от 0 до 1
    document.querySelector("#animate").style.transform = `translateX(${200 * progress}px) rotate(${90 * progress}deg)`;
})
.addTo(controller);

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

Практические советы

  • Использовать transform вместо top/left для перемещения элементов — это обеспечивает аппаратное ускорение и более плавные анимации.
  • Стараться группировать анимации в один .setTween или один GSAP-твин для оптимизации производительности.
  • При сложных комбинациях вращений и масштабирования учитывать центр трансформации (transform-origin), чтобы элемент вел себя ожидаемо.
  • Для параллакс-эффектов применять translateY с разной скоростью относительно прокрутки.
  • Объединять transform с opacity для создания эффектов появления и исчезновения.

Использование transform-origin

Изменение точки трансформации позволяет создавать эффект вращения вокруг разных осей:

gsap.to("#animate", {
    rotation: 180,
    transformOrigin: "top left",
    duration: 2
});
  • Значения могут быть center center, top right, 50% 50% и т.д.
  • При масштабировании или вращении выбор правильной точки критически важен для визуальной логики.

Анимация нескольких элементов

Для последовательной анимации элементов можно использовать массивы или циклы:

document.querySelectorAll(".box").forEach((el, index) => {
    var tween = gsap.to(el, { y: 100, rotation: 360, scale: 1.2, duration: 1 });
    new ScrollMagic.Scene({
        triggerElement: el,
        duration: 300,
        offset: index * 50
    })
    .setTween(tween)
    .addTo(controller);
});

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

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

Оглавление