GSAP (GreenSock Animation Platform) — независимая от фреймворков JavaScript-библиотека для анимации CSS, SVG, canvas, WebGL и JavaScript-объектов. По состоянию на 12 сентября 2026 года актуальная документация относится к версии 3.15, а весь набор GSAP, включая ранее платные плагины, доступен бесплатно для коммерческого использования.

Что такое GSAP

GSAP управляет изменением значений во времени: вы задаёте начальное или конечное состояние, длительность и характер движения, а библиотека выполняет анимацию. Она подходит для отдельных переходов и сложных последовательностей, работает в основных современных браузерах и не привязана к React, Vue или другому фреймворку.

Основные причины использовать GSAP:

  • единый API для CSS-свойств, атрибутов SVG, массивов и JavaScript-объектов;
  • точное управление последовательностями через таймлайны;
  • дополнительные плагины для скролла, морфинга, текста, перетаскивания и других задач;
  • встроенные средства очистки анимаций, адаптации к размеру экрана и prefers-reduced-motion.

Ключевые возможности

ВозможностьЧто делает
gsap.to() / from() / fromTo()Анимирует свойства от начального значения к конечному
TimelineСобирает анимации в управляемую последовательность с паузами и наложением
EasingЗадаёт характер движения: равномерный ход, ускорение, отскок или пружину
staggerСдвигает время запуска анимаций для группы элементов
gsap.matchMedia()Включает разные анимации для брейкпоинтов и настроек доступности
ScrollTriggerСвязывает анимацию с прокруткой, поддерживает pin и scrub
SplitTextРазбивает текст на строки, слова и символы для последующей анимации
FlipАнимирует переход между состояниями макета
DraggableДобавляет перетаскивание элементов

Установка и подключение

Быстрый старт через CDN

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
  gsap.to(".box", {
    x: 300,
    duration: 1,
    ease: "power2.out",
  });
</script>

Установка через npm

npm install gsap
import gsap from "gsap"

gsap.to(".box", { rotation: 360, duration: 2 })

Пакет содержит ES-модули, а каталог dist предоставляет UMD-файлы для дополнительной совместимости.

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

Подключите нужный плагин и зарегистрируйте его один раз до создания использующих его анимаций:

import gsap from "gsap"
import ScrollTrigger from "gsap/ScrollTrigger"

gsap.registerPlugin(ScrollTrigger)
💡
Если анимация с плагином не запускается, проверьте импорт и вызов gsap.registerPlugin().

Интеграция с React

Официальный пакет @gsap/react предоставляет хук useGSAP(). Он выполняет анимации после монтирования компонента и автоматизирует очистку созданных экземпляров.

npm install gsap @gsap/react

Изоляция анимации внутри компонента

import { useRef } from "react"
import gsap from "gsap"
import { useGSAP } from "@gsap/react"

gsap.registerPlugin(useGSAP)

function Hero() {
  const container = useRef(null)

  useGSAP(
    () => {
      gsap.from(".title", {
        y: 40,
        opacity: 0,
        duration: 0.8,
        ease: "power2.out",
      })
      gsap.from(".subtitle", {
        y: 20,
        opacity: 0,
        duration: 0.6,
        delay: 0.2,
      })
    },
    { scope: container }
  )

  return (
    <section ref={container}>
      <h1 className="title">Заголовок</h1>
      <p className="subtitle">Подзаголовок</p>
    </section>
  )
}

Параметр scope ограничивает строковые селекторы контейнером компонента. Благодаря этому .title внутри одного экземпляра Hero не затронет элементы с тем же классом в другой части страницы.

ScrollTrigger внутри компонента

import { useRef } from "react"
import gsap from "gsap"
import ScrollTrigger from "gsap/ScrollTrigger"
import { useGSAP } from "@gsap/react"

gsap.registerPlugin(ScrollTrigger, useGSAP)

function Features() {
  const container = useRef(null)

  useGSAP(
    () => {
      gsap.from(".card", {
        y: 60,
        opacity: 0,
        stagger: 0.15,
        scrollTrigger: {
          trigger: ".cards",
          start: "top 80%",
        },
      })
    },
    { scope: container }
  )

  return (
    <div ref={container}>
      <div className="cards">
        <div className="card">1</div>
        <div className="card">2</div>
        <div className="card">3</div>
      </div>
    </div>
  )
}
⚠️
В приложениях с серверным рендерингом размещайте код, который обращается к DOM, в клиентском компоненте. Проверяйте правила импорта для конкретной сборки и фреймворка.

Лицензия и доступность плагинов

По состоянию на 12 сентября 2026 года официальный репозиторий сообщает, что GSAP и все дополнительные плагины, включая SplitText и MorphSVG, бесплатны для коммерческого использования благодаря поддержке Webflow. Отдельная подписка для получения этих плагинов больше не требуется.

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

Полезные сценарии

Появление секции при прокрутке

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

gsap.from(".section", {
  y: 50,
  opacity: 0,
  duration: 0.8,
  scrollTrigger: {
    trigger: ".section",
    start: "top 85%",
  },
})

Результат можно проверить, перезагрузив страницу перед секцией и прокрутив её так, чтобы верх секции достиг примерно 85% высоты окна. Сценарий не подходит для обязательного содержимого, если без анимации оно остаётся скрытым при ошибке JavaScript.

Параллакс фона

Задача: медленно смещать фон героя вместе с прокруткой:

gsap.to(".bg", {
  yPercent: -30,
  ease: "none",
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    end: "bottom top",
    scrub: true,
  },
})

При прокрутке между начальной и конечной точками положение .bg должно плавно меняться. На слабых устройствах и узких экранах проверьте плавность отдельно; при необходимости отключите эффект через gsap.matchMedia().

Анимация заголовка по символам

import gsap from "gsap"
import { SplitText } from "gsap/SplitText"

gsap.registerPlugin(SplitText)

const split = new SplitText(".headline", { type: "chars" })
gsap.from(split.chars, {
  y: 20,
  opacity: 0,
  stagger: 0.03,
})

После создания SplitText массив split.chars содержит отдельные элементы для анимации символов. Для основного текста учитывайте доступность и проверяйте, как результат читают вспомогательные технологии.

Микровзаимодействие кнопки

const button = document.querySelector(".cta")

button.addEventListener("mouseenter", () => {
  gsap.to(button, { scale: 1.05, duration: 0.2 })
})

button.addEventListener("mouseleave", () => {
  gsap.to(button, { scale: 1, duration: 0.2 })
})

Кнопка должна увеличиваться при наведении и возвращаться к исходному размеру после ухода указателя. Для сенсорных устройств этот эффект не заменяет состояния нажатия и фокуса.

Как учесть reduced motion

prefers-reduced-motion сообщает, что пользователь предпочитает меньше движения. GSAP позволяет обработать эту настройку через matchMedia():

const media = gsap.matchMedia()

media.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".hero", { y: 40, opacity: 0, duration: 0.8 })
})

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

Проверка результата

Минимальная проверка после подключения:

  1. Откройте инструменты разработчика и убедитесь, что в консоли нет ошибок импорта или регистрации плагина.
  2. Проверьте простую анимацию gsap.to() без дополнительных плагинов.
  3. Если базовый пример работает, подключите один плагин и протестируйте его отдельно.
  4. Проверьте страницу после изменения размера окна и загрузки шрифтов или изображений.
  5. Включите prefers-reduced-motion и убедитесь, что содержимое не исчезает и остаётся доступным.
  6. В React размонтируйте и повторно откройте компонент: анимации, созданные в useGSAP(), не должны продолжать работать после очистки.

Материал основан на официальной документации и официальном репозитории; приведённые примеры не подтверждены отдельным запуском в конкретной сборке проекта.

Частые ошибки

  • Плагин не срабатывает. Проверьте путь импорта и регистрацию через gsap.registerPlugin().
  • Движение выглядит дёрганым. Сначала проверьте частые перерисовки, размеры изображений и конкурирующие CSS-правила. Для перемещения обычно удобнее x и y, чем постоянное изменение координат макета.
  • Анимация React повторяется после переходов. Запускайте её через useGSAP() и задавайте scope для селекторов компонента.
  • ScrollTrigger использует неверные позиции. После изменения размеров содержимого вызовите ScrollTrigger.refresh().
  • Эффект мешает пользователю. Добавьте обработку prefers-reduced-motion через gsap.matchMedia().
  • Несколько твинов управляют одним свойством. Проверьте, не создаются ли повторные экземпляры при ререндере или обработке событий.

Официальные ссылки

Если нужно выбрать набор плагинов или встроить GSAP в существующий интерфейс, полезно сначала определить обязательные эффекты, ограничения устройств и способ проверки доступности.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov