Удаленные методы и их замены

Удалённые методы в GSAP (GreenSock Animation Platform) ранее обеспечивали прямое управление анимацией через устаревшие функции вроде TweenLite.to(), TweenMax.from(), TweenMax.staggerTo() и других. С развитием библиотеки и стандартизацией подходов к анимации, эти методы были постепенно заменены новыми, более гибкими и оптимизированными конструкциями на основе класса gsap. Понимание этих замен позволяет создавать более компактный и производительный код.

Универсальная функция gsap.to()

Метод gsap.to() служит современной заменой для большинства устаревших функций типа TweenMax.to(). С его помощью можно анимировать свойства элементов, управлять продолжительностью и задержкой, а также задавать сложные кривые анимации через объект конфигурации.

Синтаксис:

gsap.to(target, {
  duration: 2,
  x: 100,
  opacity: 0.5,
  ease: "power2.out",
  delay: 1
});
  • target — CSS-селектор, DOM-элемент или массив элементов.
  • duration — продолжительность анимации в секундах.
  • x, y, opacity, scale — изменяемые свойства.
  • ease — функция сглаживания перехода.
  • delay — задержка перед запуском.

Особенности: Метод позволяет одновременно анимировать несколько свойств без необходимости использования нескольких вызовов. Ранее для каждой отдельной анимации использовался отдельный метод TweenMax.

Метод gsap.from()

Метод gsap.from() позволяет создавать анимацию, начинающуюся с заданных значений и плавно возвращающуюся к текущему состоянию элемента. Это современная замена устаревших функций TweenLite.from() и TweenMax.from().

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

gsap.from(".box", {
  duration: 1.5,
  x: -200,
  opacity: 0,
  ease: "back.out(1.7)"
});
  • Анимация начнётся с позиции x = -200 и прозрачности 0, плавно перейдя к текущему положению элемента.
  • Функция ease определяет тип кривой перехода.

Последовательные анимации и timeline

Для упрощения управления сложными последовательностями анимаций используется объект gsap.timeline(). Он заменяет методы типа staggerTo или ручное управление задержками через множество отдельных твинов.

Создание timeline:

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

tl.to(".box1", { x: 100 })
  .to(".box2", { y: 50 }, "-=0.5")
  .from(".box3", { opacity: 0 });
  • defaults задаёт значения по умолчанию для всех твинов в timeline.
  • Второй параметр в .to() позволяет наложить анимации друг на друга через отрицательные значения ("-=0.5").
  • Timeline упрощает управление группой анимаций, обеспечивает точную синхронизацию и легко масштабируется.

Массовые анимации и замена stagger

Метод stagger устарел, и его функции теперь встроены в timeline или твины с параметром stagger.

Пример:

gsap.to(".boxes", {
  x: 100,
  duration: 1,
  stagger: 0.2,
  ease: "power2.inOut"
});
  • Все элементы с классом .boxes анимируются по очереди с задержкой в 0.2 секунды.
  • Позволяет отказаться от ручного создания цикла анимаций для каждого элемента.

Анимация произвольных свойств и пользовательских объектов

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

Пример:

let obj = { value: 0 };

gsap.to(obj, {
  value: 100,
  duration: 2,
  onUpdate: () => console.log(obj.value.toFixed(2))
});
  • onUpdate вызывается каждый кадр, что позволяет синхронизировать изменения с другими действиями.
  • Этот подход заменяет устаревшие методы анимации числовых значений через таймеры.

Контроль и управление анимациями

GSAP предоставляет единый API для управления всеми активными анимациями вместо множества отдельных функций. Основные методы управления:

  • pause() — приостанавливает твины и timeline.
  • resume() — возобновляет приостановленные анимации.
  • reverse() — запускает анимацию в обратном направлении.
  • kill() — полностью останавливает и удаляет анимацию.

Пример:

const tween = gsap.to(".box", { x: 200, duration: 2 });

tween.pause();
setTimeout(() => tween.resume(), 1000);
  • Использование объекта твина позволяет гибко управлять анимацией без создания дополнительных переменных или методов.

Использование плагинов вместо устаревших методов

Многие старые функции GSAP были заменены плагинами, которые расширяют возможности анимации:

  • ScrollTrigger — анимация при скролле вместо ручного вычисления позиции элемента.
  • MotionPathPlugin — движение по кривой вместо устаревших кастомных функций.
  • Draggable — взаимодействие с элементами через перетаскивание.

Пример ScrollTrigger:

gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "top 20%",
    scrub: true
  }
});
  • Позволяет синхронизировать анимации с прокруткой страницы.
  • Упрощает управление событиями и отказ от устаревших onEnterFrame или ручных scroll-listener’ов.

Итоговая структура подхода к замене устаревших методов

  1. TweenMax.to/from → gsap.to/from для базовой анимации.
  2. stagger → встроенный stagger в gsap.to или timeline`.
  3. Ручные последовательности → gsap.timeline().
  4. Числовые анимации → gsap.to с объектами и onUpdate.
  5. Событийные и интерактивные эффекты → плагины (ScrollTrigger, MotionPathPlugin, Draggable).

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

Оглавление