Специальные свойства: x, y, rotation, scale

GSAP позволяет легко управлять положением элементов на странице с помощью свойств x и y. Эти свойства изменяют трансформации CSS, оставляя исходные координаты элемента нетронутыми, что обеспечивает более плавную анимацию по сравнению с прямым изменением top и left.

Пример базового использования:

gsap.to(".box", { duration: 2, x: 300, y: 150 });

В данном примере элемент с классом .box перемещается по оси X на 300 пикселей и по оси Y на 150 пикселей за 2 секунды.

Особенности работы с x и y:

  • Значения могут быть как абсолютными, так и относительными ("+=50", "-=30").
  • GSAP автоматически подбирает оптимальные CSS-трансформации для плавности.
  • Можно комбинировать с другими свойствами трансформации без конфликтов.

Вращение: свойство rotation

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

Пример:

gsap.to(".wheel", { duration: 3, rotation: 360 });

Элемент .wheel повернется на 360 градусов за 3 секунды.

Дополнительные возможности:

  • rotationX и rotationY позволяют вращать элемент в 3D-пространстве.
  • Можно задавать относительные вращения: rotation: "+=90".
  • Комбинация с x и y позволяет создавать сложные анимации движения с поворотом.

Масштабирование: свойство scale

Свойство scale управляет размером элемента по обеим осям одновременно. Для отдельных осей используются scaleX и scaleY.

Примеры:

gsap.to(".circle", { duration: 2, scale: 1.5 });
gsap.to(".rectangle", { duration: 2, scaleX: 2, scaleY: 0.5 });

Первый пример увеличивает элемент на 50% относительно исходного размера, второй растягивает элемент по оси X в два раза и сжимает по оси Y в два раза.

Ключевые моменты при использовании масштабирования:

  • Точка масштабирования задается через transformOrigin.
  • Анимации масштаба сохраняют плавность при использовании с другими свойствами трансформации.
  • Можно использовать относительные значения: scale: "+=0.5" для постепенного увеличения.

Совмещение свойств для сложной анимации

GSAP позволяет комбинировать x, y, rotation и scale в одной анимации, создавая комплексные эффекты движения и трансформации.

Пример сложной анимации:

gsap.to(".sprite", { 
  duration: 4, 
  x: 200, 
  y: 100, 
  rotation: 180, 
  scale: 1.3, 
  ease: "power2.inOut" 
});

Эта анимация одновременно перемещает элемент, вращает и масштабирует его с плавным эффектом замедления и ускорения (ease).

Советы для работы с комбинациями:

  • Использовать однотипные единицы измерения (пиксели или проценты) для предсказуемости.
  • Планировать transformOrigin для вращения и масштабирования, чтобы элементы не уходили за пределы контейнера.
  • Экспериментировать с easing-функциями для более живой и естественной анимации.

Практическое использование в интерфейсе

  • Перетаскиваемые элементы: x и y идеально подходят для drag-and-drop интерфейсов.
  • Вращающиеся иконки и элементы: rotation позволяет создавать интерактивные элементы с визуальной обратной связью.
  • Пульсирующие кнопки и карточки: scale применяется для акцентов при наведении или кликах.

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

Оглавление