Новые возможности GSAP 3

GSAP 3 (GreenSock Animation Platform) значительно упрощает создание анимаций в JavaScript. Основной объект для работы — это gsap, предоставляющий методы to, from, fromTo и set.

Метод gsap.to позволяет анимировать свойства объекта к заданным значениям:

gsap.to(".box", {
  duration: 2,
  x: 300,
  rotation: 45,
  ease: "power2.inOut"
});

Метод gsap.from задаёт начальные значения, от которых происходит анимация:

gsap.from(".box", {
  duration: 2,
  opacity: 0,
  y: -100
});

Метод gsap.fromTo комбинирует обе концепции, задавая начальные и конечные значения:

gsap.fromTo(".box",
  { x: 0, opacity: 0 },
  { x: 300, opacity: 1, duration: 2 }
);

Метод gsap.set позволяет мгновенно установить свойства без анимации:

gsap.set(".box", { x: 100, y: 50 });

Управление временной шкалой и последовательностью анимаций

GSAP 3 ввёл объект Timeline, который позволяет объединять несколько анимаций в цепочку. Основные преимущества: управление порядком, синхронизация и повторение.

const tl = gsap.timeline({ repeat: 2, yoyo: true });

tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { rotation: 360, duration: 1 }, "+=0.5")
  .to(".box", { scale: 1.5, duration: 1 });
  • repeat — количество повторов.
  • yoyo — эффект обратного воспроизведения после завершения цикла.
  • Параметр "+=0.5" задаёт задержку перед запуском следующей анимации.

Новая система easings

GSAP 3 объединил несколько систем easing в единый набор. Теперь можно использовать предустановленные функции: power1, power2, power3, power4, elastic, bounce, rough, slow.

gsap.to(".box", { x: 300, duration: 2, ease: "bounce.out" });

Ключевое отличие — easings теперь более естественно интерполируют значения, позволяя создавать плавные и реалистичные движения без ручной настройки кривых Безье.

Свойства CSS и SVG

GSAP 3 напрямую работает с CSS-переменными, SVG-атрибутами и сложными трансформациями. Для трансформаций достаточно указать свойства, такие как x, y, scale, rotation, skew.

gsap.to(".circle", {
  x: 200,
  scale: 2,
  rotation: 180,
  transformOrigin: "50% 50%",
  duration: 2
});

Работа с SVG теперь особенно удобна: атрибуты вроде stroke-dasharray и stroke-dashoffset можно анимировать напрямую:

gsap.from(".path", { strokeDasharray: "1000", strokeDashoffset: "1000", duration: 2 });

Контроль анимации

GSAP 3 предоставляет обширные возможности для управления анимациями после их создания. Методы pause, resume, reverse, restart, seek, progress позволяют гибко изменять ход анимации.

const anim = gsap.to(".box", { x: 400, duration: 4, paused: true });

anim.play();      // Запуск
anim.pause();     // Пауза
anim.reverse();   // Обратное воспроизведение
anim.seek(2);     // Перейти к позиции 2 секунд
anim.progress(0.5); // Установить прогресс 50%

Модификаторы и кастомные свойства

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

gsap.to(".box", {
  x: 300,
  duration: 2,
  modifiers: {
    x: function(x) {
      return parseFloat(x) + 50; // смещение на 50px от текущего положения
    }
  }
});

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

ScrollTrigger и интеграция с прокруткой

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

gsap.to(".section", {
  scrollTrigger: {
    trigger: ".section",
    start: "top 80%",
    end: "bottom 20%",
    scrub: true
  },
  x: 500,
  rotation: 360
});
  • start и end задают диапазон скролла.
  • scrub синхронизирует анимацию с движением страницы.

GSAP 3 и мобильные оптимизации

GSAP 3 автоматически использует GPU-ускорение для трансформаций (x, y, rotation, scale) и минимизирует перерасчёт стилей. Это делает анимации плавными даже на слабых устройствах.

Свойства, влияющие на производительность:

  • Предпочтение трансформаций transform вместо top/left.
  • Использование will-change: transform для сложных элементов.
  • Ограничение одновременных анимаций до реально видимых элементов.
Оглавление