Трансформации: rotation, scale, transformOrigin

GSAP (GreenSock Animation Platform) предоставляет мощные средства для анимации DOM-элементов, включая трансформации: вращение (rotation), масштабирование (scale) и установку точки трансформации (transformOrigin). Эти свойства управляют визуальными преобразованиями элементов без необходимости вручную изменять CSS-свойства.

Вращение элементов: rotation

Свойство rotation задаёт угол поворота элемента вокруг его центра или заданной точки трансформации.

Синтаксис:

gsap.to(".element", { duration: 2, rotation: 180 });
  • duration – длительность анимации в секундах.
  • rotation – угол поворота в градусах. Можно использовать отрицательные значения для вращения против часовой стрелки.

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

  • Значение rotation может быть абсолютным или относительным:

    gsap.to(".element", { rotation: "+=90" }); // Поворот на 90° относительно текущего положения

  • Поддерживается анимация по кругу с плавным переходом:

    gsap.to(".element", { rotation: 360, duration: 1, repeat: -1, ease: "linear" });

  • Для более сложных эффектов можно использовать rotationX и rotationY для 3D-поворотов.

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

Свойство scale изменяет размер элемента пропорционально.

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

gsap.to(".box", { duration: 1, scale: 1.5 });

  • scale по умолчанию равен 1 (оригинальный размер).

  • Можно масштабировать только по одной оси:

    gsap.to(".box", { scaleX: 2, scaleY: 0.5, duration: 1 });

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

    gsap.to(".box", { scale: "+=0.5" });

Важные моменты:

  • Масштабирование влияет на размеры элемента, но при этом сохраняет внутренние пропорции, если используется единое значение scale.
  • Для корректной анимации важно учитывать transformOrigin, чтобы элемент масштабировался относительно нужной точки.

Установка точки трансформации: transformOrigin

transformOrigin задаёт точку, относительно которой происходят все трансформации: вращение, масштабирование и наклон.

Пример:

gsap.to(".circle", { duration: 1, rotation: 180, transformOrigin: "50% 50%" });

  • Значение "50% 50%" соответствует центру элемента (по умолчанию).

  • Можно указывать точку в пикселях или процентах:

    gsap.to(".circle", { rotation: 180, transformOrigin: "top left" });

  • Для создания динамических эффектов можно изменять transformOrigin во время анимации:

    gsap.to(".circle", { rotation: 180, transformOrigin: "100% 0%", duration: 1 });

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

  • Если не задать transformOrigin, элемент будет вращаться или масштабироваться вокруг своего центра.
  • Изменение точки трансформации до или во время анимации позволяет создавать уникальные визуальные эффекты, например, вращение вокруг края или угла элемента.

Комбинирование трансформаций

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

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

gsap.to(".card", { 
  duration: 2, 
  rotation: 360, 
  scale: 1.5, 
  transformOrigin: "bottom right", 
  ease: "power2.inOut"
});
  • Вращение происходит вокруг нижнего правого угла.
  • Элемент увеличивается в размере при одновременном вращении.
  • Плавность обеспечивается функцией ease.

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

  1. Для плавной анимации вращения используйте ease: "linear".
  2. Масштабирование больших элементов может влиять на производительность, особенно при анимации множества объектов.
  3. Для 3D-эффектов добавляйте свойства rotationX, rotationY и perspective родительскому элементу.
  4. Тестирование transformOrigin на разных размерах элементов помогает избежать неожиданных смещений при анимации.

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

Оглавление