Установка и базовая настройка

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

Подключение библиотеки

GSAP может быть подключен несколькими способами:

  1. Через CDN Самый простой способ использовать библиотеку — подключить её напрямую с сервера GreenSock:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>

    Использование CDN обеспечивает доступ к последней стабильной версии без необходимости локальной установки.

  2. Через npm Для проектов на Node.js и сборщиках модулей (Webpack, Vite, Parcel) рекомендуется установка через npm:

    npm install gsap

    После установки библиотеку можно импортировать в Jav * aScript:

    import { gsap } from "gsap";

    Для работы с плагинами (например, ScrollTrigger) требуется отдельный импорт:

    import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

  3. Локальное подключение Можно скачать библиотеку с официального сайта и подключить её как локальный файл:

    <script src="js/gsap.min.js"></script>

    Локальное подключение полезно для проектов без доступа к интернету или для контроля версий.

Основные объекты и методы

GSAP использует несколько ключевых объектов и функций, которые лежат в основе анимаций:

  • gsap.to(target, vars) — анимация от текущего состояния элемента к заданным свойствам.
  • gsap.from(target, vars) — анимация от заданных свойств к текущему состоянию элемента.
  • gsap.fromTo(target, fromVars, toVars) — комбинированный вариант с явным указанием начальных и конечных значений.
  • gsap.set(target, vars) — немедленное применение стилей без анимации.
  • gsap.timeline(vars) — создание последовательности анимаций с возможностью управления временем и синхронизацией.

Пример простой анимации:

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

Пояснение ключевых параметров:

  • x — смещение по горизонтали (можно использовать y для вертикали).
  • rotation — вращение в градусах.
  • duration — длительность анимации в секундах.
  • ease — функция ускорения/замедления движения. GSAP поддерживает множество предустановленных кривых (power1, power2, elastic, bounce и др.).

Timeline: управление последовательностями

Timeline позволяет объединять несколько анимаций в одну последовательность, управлять задержками и синхронизацией.

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

tl.to(".box", { x: 300, duration: 1 })
  .to(".box", { y: 150, duration: 1 })
  .to(".box", { rotation: 180, duration: 1 });

Основные свойства timeline:

  • repeat — количество повторов всей последовательности.
  • yoyo — при повторе анимации воспроизводится в обратном порядке.
  • delay — задержка перед стартом анимации или последовательности.
  • stagger — позволяет создавать эффект каскадного появления для группы элементов.
gsap.to(".item", { x: 100, stagger: 0.2 });

Настройка easing и контролируемой анимации

GSAP предоставляет гибкий механизм управления скоростью анимации через easing. Существуют три категории:

  1. Power — линейное ускорение (power1, power2, power3, power4).
  2. Elastic — имитация пружины с отскоком.
  3. Bounce — эффект подпрыгивания.

Для более точного контроля можно создавать кастомные функции easing с помощью CustomEase или gsap.parseEase.

Контроль анимации осуществляется методами:

  • play() — запуск или продолжение.
  • pause() — приостановка.
  • reverse() — воспроизведение в обратном порядке.
  • seek(time) — переход к конкретной позиции в анимации.
  • progress(value) — установка прогресса анимации (от 0 до 1).

Работа с DOM-элементами

GSAP поддерживает работу с любыми селекторами, массивами элементов и NodeList.

gsap.to(document.querySelectorAll(".circle"), {
  x: 200,
  duration: 2,
  stagger: 0.3
});

Особенности:

  • Поддержка классов, id, тегов, псевдоклассов.
  • Возможность анимировать одновременно несколько элементов.
  • Гибкая работа с inline-стилями и CSS-переменными.
gsap.to(".box", { "--custom-color": "red", duration: 1 });

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

GSAP работает напрямую с requestAnimationFrame, что обеспечивает высокую производительность без зависания интерфейса. Рекомендуется:

  • Минимизировать количество одновременных анимаций.
  • Использовать transform вместо top, left для плавного GPU-ускоренного рендеринга.
  • Для крупных проектов применять timeline и повторно использовать анимации вместо создания новых экземпляров.

Подключение и использование плагинов

GSAP включает множество плагинов для расширения функционала:

  • ScrollTrigger — привязка анимаций к прокрутке страницы.
  • Draggable — создание интерактивных перетаскиваемых элементов.
  • SplitText — анимация текста по буквам, словам или строкам.

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

gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom 100px",
    scrub: true
  }
});

scrollTrigger позволяет синхронизировать анимацию с прокруткой, задавать границы действия и плавность с помощью scrub.

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

Оглавление