Комбинирование с другими свойствами

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

Простейший пример комбинирования свойств выглядит так:

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

В этом случае элемент с классом .box будет одновременно перемещаться по осям X и Y, вращаться и менять прозрачность. Все свойства синхронизированы во времени и управляются одним вызовом gsap.to.

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

GSAP позволяет устанавливать индивидуальные параметры для каждого свойства. Например, можно заставить перемещение происходить быстрее, а изменение прозрачности медленнее:

gsap.to(".circle", {
  x: 200,
  y: 100,
  opacity: 0,
  duration: 3,
  ease: "power2.inOut",
  onUpdate: function() {
    console.log("Анимация в процессе");
  }
});

Для более тонкой настройки можно использовать объект vars для каждого свойства через gsap.timeline:

const tl = gsap.timeline();

tl.to(".square", { x: 100, duration: 1 })
  .to(".square", { y: 200, duration: 2 }, "<")  // "<" запускает анимацию одновременно с предыдущей
  .to(".square", { rotation: 90, duration: 1.5 }, "-=0.5"); // "-=0.5" смещает старт на 0.5 секунд назад

Использование таймлайнов позволяет комбинировать свойства и контролировать их порядок и пересечение.

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

Одним из наиболее частых сценариев является анимация CSS-трансформаций: translate, scale, rotate, skew. GSAP объединяет их в один поток анимации без конфликтов.

Пример:

gsap.to(".image", {
  duration: 2,
  x: 150,
  y: 50,
  scale: 1.5,
  rotation: 180,
  skewX: 20,
  ease: "elastic.out(1, 0.3)"
});

Здесь GSAP автоматически рассчитывает промежуточные состояния всех свойств, что обеспечивает плавное и естественное движение.

Комбинирование с цветами и прозрачностью

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

gsap.to(".text", {
  duration: 2,
  color: "#ff0000",
  backgroundColor: "#0000ff",
  opacity: 0.7
});

Комбинация числовых свойств (позиция, прозрачность) и цветовых изменений позволяет создавать сложные визуальные эффекты.

Использование функций и выражений

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

gsap.to(".dot", {
  x: (i) => i * 50,
  y: (i) => i * 30,
  rotation: () => Math.random() * 360,
  duration: 2,
  stagger: 0.2
});

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

Использование циклических эффектов с repeat и yoyo

Комбинирование свойств с повторением анимации позволяет создавать живые и динамичные интерфейсы:

gsap.to(".ball", {
  x: 300,
  y: 200,
  rotation: 360,
  scale: 0.8,
  duration: 2,
  repeat: -1,
  yoyo: true,
  ease: "power1.inOut"
});
  • repeat: -1 делает анимацию бесконечной.
  • yoyo: true заставляет анимацию возвращаться к исходным значениям.
  • Все свойства плавно комбинируются для органичного эффекта.

Сложные последовательности через timeline

GSAP Timeline — это инструмент для согласованного комбинирования анимаций с различными свойствами и временными смещениями.

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

const tl = gsap.timeline({ defaults: { duration: 1, ease: "power2.inOut" } });

tl.to(".box", { x: 200, rotation: 90 })
  .to(".box", { y: 100, scale: 1.5 }, "-=0.5")
  .to(".box", { opacity: 0.5, backgroundColor: "#ff6600" }, "<")
  .to(".box", { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1, backgroundColor: "#00ff00" }, "+=1");

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

Ключевые моменты при комбинировании

  1. Порядок не всегда имеет значение — GSAP автоматически управляет пересечениями свойств.
  2. Таймлайны дают полный контроль над временем и взаимодействием нескольких анимаций.
  3. Функции для значений свойств позволяют динамически изменять параметры каждого свойства.
  4. Комбинирование числовых и цветовых свойств создаёт более выразительные визуальные эффекты.
  5. Повторение и yoyo делают анимации цикличными и живыми без дополнительного кода.

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

Оглавление