Регистрация и инициализация

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

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

Для активации некоторых возможностей GSAP необходимо зарегистрировать соответствующие плагины. Регистрация выполняется методом gsap.registerPlugin().

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

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

Ключевые моменты:

  • Без регистрации плагины, такие как ScrollTrigger, Draggable, MotionPathPlugin, не будут работать.
  • Регистрация должна происходить до создания анимаций, использующих плагин.
  • Можно регистрировать несколько плагинов одновременно:
gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin);

Создание базовых анимаций

После регистрации плагинов начинается работа с анимацией. Основные методы GSAP для этого: gsap.to(), gsap.from(), gsap.fromTo().

  1. gsap.to() – анимация от текущего состояния к указанным свойствам:
gsap.to(".box", {
  x: 300,
  duration: 2,
  ease: "power2.inOut"
});
  1. gsap.from() – анимация от заданных свойств к текущим:
gsap.from(".box", {
  opacity: 0,
  y: -100,
  duration: 1.5
});
  1. gsap.fromTo() – комбинация, позволяющая задать и начальное, и конечное состояние:
gsap.fromTo(".box", 
  { scale: 0 }, 
  { scale: 1, duration: 1, ease: "bounce.out" }
);

Ключевые моменты:

  • Все методы принимают объект с анимационными свойствами.
  • Свойство duration указывает длительность анимации в секундах.
  • Свойство ease определяет тип интерполяции (ускорение, замедление и т.д.).

Инициализация таймлайнов

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

Пример базовой инициализации:

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

tl.to(".box1", { x: 200 })
  .to(".box2", { y: 150 }, "-=0.5") // запускается за 0.5 сек до конца предыдущей
  .from(".box3", { opacity: 0 });

Ключевые моменты:

  • Опция defaults позволяет задавать значения по умолчанию для всех анимаций таймлайна.
  • Таймлайны можно вложить и создавать сложные последовательности.
  • Позиционные параметры ("<", ">", "-=0.5") управляют синхронизацией и перекрытием анимаций.

Работа с глобальными настройками

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

gsap.defaults({ duration: 2, ease: "power2.inOut" });
  • Устанавливает значения по умолчанию для всех последующих анимаций.
  • Можно изменить глобальные свойства времени и интерполяции без дублирования в каждом объекте анимации.

Интеграция с DOM и модульной системой

При использовании GSAP в современных проектах, построенных на сборщиках модулей (Webpack, Vite, Parcel), рекомендуется импортировать только необходимые модули:

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
  • Это снижает размер финального бандла.
  • Обеспечивает корректную работу с tree-shaking.

Для прямого подключения через <script> достаточно использовать CDN:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

После подключения через CDN регистрация плагинов производится точно так же, как и при модульной системе.

Особенности инициализации на странице

  1. Ранний вызов GSAP: Анимации должны создаваться после того, как DOM полностью загружен (DOMContentLoaded или window.onload) для работы с реальными элементами.
document.addEventListener("DOMContentLoaded", () => {
  gsap.to(".box", { x: 100, duration: 1 });
});
  1. Повторная инициализация: Если требуется динамически добавлять элементы, можно использовать функции gsap.utils.toArray() для массовой инициализации анимаций.
gsap.utils.toArray(".animated").forEach(el => {
  gsap.from(el, { opacity: 0, y: 50, duration: 1 });
});

Практические рекомендации

  • Всегда регистрировать плагины перед использованием.
  • Использовать timeline для последовательных анимаций вместо цепочек отдельных gsap.to().
  • Применять defaults для сокращения повторяющихся настроек.
  • Импортировать только нужные модули, чтобы оптимизировать производительность.
  • Всегда инициализировать анимации после загрузки DOM для корректной работы с элементами страницы.

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

Оглавление