Основные изменения в API

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

1. Унификация методов to, from, fromTo

Ранее каждая из трёх функций имела свою уникальную специфику:

  • gsap.to(target, vars) — анимация к конечным значениям;
  • gsap.from(target, vars) — анимация от начальных значений к текущим;
  • gsap.fromTo(target, fromVars, toVars) — анимация от заданных начальных к заданным конечным значениям.

В новых версиях API добавлена гибкость через единый метод gsap.to(), который позволяет указывать ключи from и to в объекте параметров. Это уменьшает дублирование кода и делает анимации более читаемыми:

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

Такой подход объединяет возможности всех трёх методов, сохраняя их семантику.

2. Работа с Timeline

Класс Timeline стал ядром управления сложными анимациями. Основные изменения включают:

  • Создание последовательностей без привязки к глобальной временной шкале:
let tl = gsap.timeline({ defaults: { duration: 1, ease: "power1.out" } });
tl.to(".box1", { x: 100 })
  .to(".box2", { y: 50 }, "<") // "<" означает параллельное начало с предыдущей анимацией
  .to(".box3", { opacity: 0 }, "+=0.5"); // "+=0.5" задержка 0.5 сек
  • Интерактивная синхронизация: новые методы tl.play(), tl.pause(), tl.reverse(), tl.seek(time) позволяют управлять анимацией в реальном времени, что особенно важно для сложных интерфейсов и игр.

3. Новая система управления targets

Ранее методы GSAP принимали target как DOM-элемент, NodeList или селектор. Нововведения:

  • Поддержка массивов, функций и кастомных объектов с произвольными свойствами;
  • Автоматическая нормализация типов данных, что упрощает работу с комплексными структурами;
  • Возможность использовать targets как функцию для динамического получения элементов:
gsap.to(() => document.querySelectorAll(".dynamic"), { duration: 1, x: 200 });

Это особенно удобно для динамически генерируемого контента и компонентов UI.

4. Обновлённая система easings

Ранее доступ к easing был ограничен строковыми значениями типа "power1.inOut". Новая система позволяет:

  • Использовать встроенные кривые через объект gsap.parseEase();
  • Передавать кастомные функции easing напрямую;
  • Применять easings для отдельных свойств анимации:
gsap.to(".box", {
  duration: 2,
  x: 300,
  ease: {
    x: "elastic.out(1, 0.3)",
    opacity: "power2.in"
  }
});

5. Поддержка CSS-переменных и свойств трансформации

API теперь полностью интегрировано с современными CSS-фичами:

  • Анимация CSS-переменных через стандартный синтаксис --variable:
gsap.to(".box", { duration: 1, "--my-color": "red" });
  • Комплексные трансформации transform (translate, rotate, scale) теперь работают без явного указания всех промежуточных значений. GSAP автоматически создаёт плавные переходы.

6. Асинхронные функции и промисы

В новых версиях методы анимации возвращают промисы, что позволяет интегрировать GSAP с современным async/await синтаксисом:

async function animateBoxes() {
  await gsap.to(".box1", { duration: 1, x: 100 });
  await gsap.to(".box2", { duration: 1, x: 100 });
}
animateBoxes();

Это упрощает создание последовательных анимаций без использования колбэков и Timeline для простых случаев.

7. Упрощённое управление повторениями и пинг-понг эффектами

Новые свойства repeat, yoyo и repeatDelay работают более предсказуемо:

gsap.to(".box", {
  duration: 1,
  x: 200,
  repeat: 3,      // количество повторений
  yoyo: true,     // возврат к исходному состоянию
  repeatDelay: 0.5
});

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

8. Улучшенные колбэки и события

API колбэков было расширено:

  • onStart, onUpdate, onComplete, onRepeat, onReverseComplete теперь передают объект анимации как аргумент;
  • Появился onInterrupt, позволяющий обрабатывать прерывание анимаций, что критично для интерактивных интерфейсов.

9. Оптимизация производительности

  • Автоматическое использование requestAnimationFrame;
  • Снижение перерисовок DOM и оптимизация вычислений свойств;
  • Поддержка GPU-ускорения для трансформаций и opacity;
  • Ленивая инициализация свойств анимации при необходимости, уменьшение нагрузки на главный поток.

10. Совместимость с современными фреймворками

GSAP теперь полностью интегрируется с React, Vue, Svelte:

  • Поддержка реактивного обновления props;
  • Возможность привязки к жизненному циклу компонентов;
  • Поддержка SSR и предварительной отрисовки без ошибок.

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

Оглавление