Работа с CSS-свойствами

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

Анимация отдельных CSS-свойств

Для анимации CSS-свойств используется функция gsap.to(), которая изменяет текущее значение свойства до заданного:

gsap.to(".box", { duration: 2, x: 200, opacity: 0.5 });
  • .box – селектор целевого элемента.
  • duration: 2 – длительность анимации в секундах.
  • x: 200 – смещение по оси X (эквивалент CSS transform: translateX(200px)).
  • opacity: 0.5 – прозрачность элемента.

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

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

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

gsap.to(".box", { duration: 1.5, x: 100, y: 50, rotation: 45, scale: 1.2, backgroundColor: "#ff0000" });
  • y – смещение по вертикали.
  • rotation – угол поворота элемента.
  • scale – масштабирование.
  • backgroundColor – плавное изменение цвета фона.

GSAP интерполирует цветовые значения, поддерживая как HEX, так и RGB и HSL форматы.

Работа с единицами измерения

GSAP автоматически обрабатывает большинство CSS-единиц (px, %, em, rem) и даже динамически вычисляет текущие значения при необходимости. Это позволяет задавать анимации относительно текущего состояния:

gsap.to(".box", { duration: 1, width: "+=50px", height: "-=20px" });
  • "+=50px" добавляет к текущей ширине 50 пикселей.
  • "-=20px" уменьшает текущую высоту на 20 пикселей.

Анимация свойств цвета

Изменение цвета является одной из самых мощных функций GSAP. Она поддерживает любые CSS-свойства, содержащие цвет, включая color, backgroundColor, borderColor:

gsap.to(".box", { duration: 2, backgroundColor: "hsl(200, 100%, 50%)", borderColor: "#00ff00" });

GSAP интерполирует цвета плавно, создавая визуально приятный переход, даже между совершенно разными цветовыми форматами.

Ключевые особенности работы с трансформациями

Трансформации (x, y, scale, rotation, skew) обрабатываются оптимально через CSS-трансформации, без изменения позиции в DOM, что значительно повышает производительность:

gsap.to(".box", { duration: 1, x: 150, rotation: 90, scale: 1.5 });
  • Трансформации компонуются в один CSS transform, что предотвращает лишние перерисовки.
  • GSAP использует собственный механизм расчёта transformOrigin для корректного центрирования анимаций.

Использование относительных значений

GSAP позволяет задавать анимации относительно текущего состояния элемента, что удобно для динамически создаваемого контента:

gsap.to(".box", { duration: 1, x: "+=100", rotation: "-=45" });
  • "+=100" – прибавление к текущей позиции.
  • "-=45" – уменьшение текущего угла поворота.

Анимация сложных CSS-свойств

С помощью GSAP можно анимировать даже сложные CSS-свойства, такие как box-shadow, clip-path и градиенты. Для box-shadow применяется объект с компонентами тени:

gsap.to(".box", { duration: 1.5, boxShadow: "10px 10px 30px rgba(0,0,0,0.5)" });

Для градиентов рекомендуется использовать вспомогательные библиотеки или CSS-переменные, совместимые с GSAP.

Функции и динамические значения

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

gsap.to(".box", {
  duration: 1,
  x: (i, target) => i * 100,
  rotation: target => parseFloat(target.style.rotation || 0) + 90
});
  • i – индекс элемента в выборке.
  • target – текущий DOM-элемент.
  • Функции позволяют создавать уникальные анимации для каждого элемента без дублирования кода.

Настройка скорости и кривых ускорения

Кривые ускорения (ease) применяются к каждому CSS-свойству индивидуально или ко всей анимации:

gsap.to(".box", { duration: 2, x: 300, ease: "power2.inOut" });
  • power2.inOut – плавное ускорение и замедление.
  • GSAP поддерживает десятки стандартных easing, а также кастомные кривые Bezier и Elastic.

Свойства трансформаций через transformOrigin

transformOrigin задаёт точку опоры для всех трансформаций:

gsap.to(".box", { duration: 1, rotation: 180, transformOrigin: "50% 50%" });
  • Центр элемента – стандартная точка (50% 50%).
  • Можно задавать конкретные пиксельные значения или проценты.

Упрощение работы с классами

GSAP может анимировать элементы при изменении классов через className:

gsap.to(".box", { duration: 1, className: "+=active" });
  • Добавление класса вызывает CSS-анимации, которые GSAP плавно интерполирует.
  • Можно использовать "-=" для удаления класса с плавной анимацией.

Работа с псевдоклассами и сложными селекторами

GSAP позволяет анимировать свойства элементов с псевдоклассами (::before, ::after) через CSS-переменные или отдельные элементы:

gsap.to(".box::before", { duration: 1, scaleX: 1.5 });
  • В современных проектах рекомендуется связывать псевдоэлементы с CSS-переменными и анимировать их через GSAP, что повышает совместимость с браузерами.

Интерактивные анимации

CSS-свойства можно анимировать в ответ на события:

document.querySelector(".box").addEventListener("mouseenter", () => {
  gsap.to(".box", { duration: 0.5, scale: 1.2, backgroundColor: "#ff0000" });
});
  • Любое свойство может быть динамически изменено в зависимости от пользовательского взаимодействия.
  • GSAP обеспечивает плавность и стабильность анимации при множественных одновременных событиях.

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

Оглавление