Экосистема GSAP: плагины и дополнения

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

CSSPlugin

CSSPlugin автоматически подключается при использовании стандартных CSS-свойств в GSAP. Он позволяет анимировать свойства вроде opacity, x, y, scale, rotation, background-color и многие другие. Основные особенности:

  • Поддержка camelCase и kebab-case для CSS-свойств.
  • Умная обработка единиц измерения (px, %, em).
  • Интеграция с transform для оптимизированной GPU-анимации.
  • Поддержка функций обратного вызова (onStart, onUpdate, onComplete).

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

gsap.to(".box", {duration: 1.5, x: 200, rotation: 360, ease: "power2.out"});

ScrollTrigger

ScrollTrigger превращает прокрутку страницы в источник триггеров для анимации. Возможности плагина:

  • Привязка анимаций к позиции скролла.
  • Создание эффектов «sticky» и параллакса.
  • Поддержка событий onEnter, onLeave, onEnterBack, onLeaveBack.
  • Синхронизация нескольких анимаций по скроллу.

Пример анимации при прокрутке:

gsap.registerPlugin(ScrollTrigger);

gsap.to(".section", {
  y: 100,
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom top",
    scrub: true
  }
});

Draggable

Draggable позволяет делать элементы интерактивными, перетаскиваемыми и реагирующими на жесты. Ключевые функции:

  • Перетаскивание по осям x и y.
  • Ограничение движения элементами родителя или сеткой.
  • Встроенная поддержка инерции и сопротивления.
  • Интеграция с onDrag, onRelease и другими событиями.

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

Draggable.create(".draggable", {
  type: "x,y",
  edgeResistance: 0.65,
  inertia: true
});

MotionPathPlugin

MotionPathPlugin позволяет анимировать объекты вдоль сложных кривых и путей SVG. Основные возможности:

  • Привязка элементов к SVG-путям.
  • Настройка вращения элемента по направлению движения.
  • Анимация вдоль сложных кривых с разной скоростью.
  • Поддержка относительных и абсолютных координат.

Пример движения по кривой:

gsap.registerPlugin(MotionPathPlugin);

gsap.to(".circle", {
  duration: 5,
  motionPath: {
    path: "#path",
    align: "#path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }
});

SplitText

SplitText упрощает работу с текстовой анимацией, разбивая текст на строки, слова и символы. Возможности:

  • Анимация отдельных символов, слов или строк.
  • Поддержка CSS-анимации и GSAP-трансформаций.
  • Упрощение сложных эффектов, например, печатающего текста или появления букв поочередно.

Пример анимации букв:

var split = new SplitText(".text", {type:"chars, words"});
gsap.from(split.chars, {duration: 1, opacity: 0, y: 50, stagger: 0.05});

CustomEase и CustomBounce

Эти плагины дают возможность создавать собственные кривые ускорения и эффекты отскока:

  • CustomEase позволяет создавать индивидуальные кривые easing с точной настройкой графика движения.
  • CustomBounce дает реалистичное поведение объектов при «прыжках» и столкновениях.

Пример пользовательской кривой:

gsap.registerPlugin(CustomEase);

CustomEase.create("custom", "M0,0 C0.126,0.382 0.302,1 1,1");

gsap.to(".box", {duration: 2, x: 400, ease: "custom"});

Дополнительные расширения и утилиты

GSAP включает вспомогательные утилиты и расширения, которые упрощают разработку:

  • GSDevTools — визуальный отладчик таймлайнов.
  • Observer — реагирует на жесты мыши, скролл и сенсорные события.
  • InertiaPlugin — добавляет плавное затухание движения с учетом физики.

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

Регистрация и использование плагинов

Для работы большинства плагинов требуется регистрация:

gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin);

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

Взаимодействие плагинов между собой

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

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

Оглавление