Wiki · Технологии разработки

GSAP

5 мин чтенияАвтор: Дмитрий КолесниковСоавторы: Евгений Баев

GSAP (GreenSock Animation Platform) – это JavaScript-библиотека для анимаций на сайтах: плавное появление блоков, сценарии при прокрутке, анимация текста, SVG и иллюстраций. Она работает в любом современном браузере и с любым фреймворком.

Дизайнер показывает макет, где заголовок собирается из букв, карточки выезжают по очереди, а при прокрутке экран на секунду замирает и рассказывает историю. Разработчик отвечает: «сделаем на GSAP». Разберёмся, что за этим стоит и о чём спросить, чтобы красота не стоила вам скорости.

Кто развивает GSAP и почему он стал бесплатным

Библиотеку создала команда GreenSock, начинали они ещё с анимаций для Flash. Сейчас GSAP принадлежит Webflow, а разработку продолжает та же команда. Весной 2025 года GSAP стал полностью бесплатным, в том числе для коммерческих проектов, и бывшие платные плагины вроде SplitText и MorphSVG вошли в общий пакет.

Важная деталь: бесплатный не значит открытый. У GSAP собственная лицензия, права на код остаются у Webflow. Запрещено использовать библиотеку в визуальных конструкторах анимаций без кода, которые конкурируют с Webflow. Для обычного сайта, магазина или приложения ограничений нет, и отдельно покупать лицензию не нужно.

Твины и таймлайны: из чего собирают анимацию

Основа библиотеки называется твином: это одно движение элемента из одного состояния в другое. Несколько твинов собирают в таймлайн: сначала выезжает заголовок, потом подпись, следом кнопка. Таймлайн можно поставить на паузу, проиграть назад или привязать к прокрутке.

gsap.to('.hero-title', {
  y: 0, opacity: 1, duration: 0.8,
  scrollTrigger: { trigger: '.hero', start: 'top 80%' }
});

Здесь заголовок поднимается на место и проявляется за 0,8 секунды, когда верх блока доходит до 80% высоты экрана. Пять строк кода вместо собственного механизма отслеживания прокрутки.

Схема состава библиотеки GSAP: ядро с твинами и таймлайнами, плагины прокрутки ScrollTrigger и ScrollSmoother, плагины текста и SVG — Из чего состоит GSAP

Плагины, ради которых GSAP выбирают

ScrollTrigger связывает анимацию с прокруткой: запускает её в нужной точке, закрепляет блок на экране, двигает сцену синхронно с колесом мыши.
SplitText разбивает текст на строки, слова и буквы, чтобы анимировать их по отдельности. Он сам ставит атрибуты для экранных читалок, поэтому текст не читается по буквам.
Flip плавно перестраивает элементы при смене раскладки, например при фильтрации каталога.
MorphSVG и DrawSVG превращают одну фигуру в другую и «рисуют» линии иллюстраций.

Анимации нового сайта ebaev.ru сделаны на GSAP с плагинами ScrollTrigger и SplitText.

GSAP и другие способы анимации

Задача	Что подходит
Наведение на кнопку, раскрытие меню, простое появление	CSS-анимации и переходы
Сложные сценарии, таймлайны, анимации при прокрутке, SVG	GSAP
Готовая иллюстрация или иконка, нарисованная в After Effects	Lottie
Анимации состояний внутри React-компонентов	Motion (бывший Framer Motion) или GSAP

GSAP работает с React, Vue и обычным JavaScript. Для React есть официальный хук useGSAP, который сам убирает анимации, когда компонент исчезает со страницы.

Когда анимация помогает, а когда мешает читать и покупать

Анимация оправдана, когда она что-то объясняет: откуда появилось окно, куда ушёл товар после нажатия «В корзину», из каких шагов состоит услуга. Если движение только украшает, его делают коротким или убирают совсем. Большие сценарии при прокрутке хорошо смотрятся на промо-страницах и в презентации продукта, а в каталоге и корзине скорее мешают покупать. Чаще всего впечатление портят одни и те же вещи:

Анимировать всё подряд. Когда двигается каждый блок, внимание не держится ни на чём.
Перехватывать прокрутку так, что текст невозможно спокойно дочитать.
Не проверять анимации на слабом телефоне и на медленном интернете.
Оставить на рабочем сайте отладочные маркеры ScrollTrigger.

Скорость, доступность и страница без скрипта

Скорость. Плавность зависит от того, что именно анимируют. Сдвиг и масштаб через transform и прозрачность браузер рисует легко, а изменение ширины, высоты и отступов заставляет пересчитывать всю страницу. Анимации через transform к тому же не вызывают сдвигов макета, которые учитывает Core Web Vitals.

Доступность. У части людей движение на экране вызывает дискомфорт, и они включают в системе настройку «уменьшить движение». Функция gsap.matchMedia позволяет учесть её: для таких посетителей анимации отключают или делают мгновенными.

Надёжность. Если блоки скрыты стилями до старта анимации, а скрипт не загрузился, посетитель увидит пустую страницу. Текст при этом должен оставаться в HTML, чтобы его видели поисковики.

Чек-лист анимаций на GSAP: transform и прозрачность, без анимации размеров, настройка уменьшения движения, контент без скрипта, проверка на телефоне — Анимация, которая не мешает

Как узнать, что на сайте GSAP

Откройте инструменты разработчика, вкладку Network, и поищите файлы gsap, ScrollTrigger, SplitText. Если библиотека подключена обычным скриптом, в консоли сработает команда gsap.version и покажет номер версии. Расширения вроде Wappalyzer тоже распознают GSAP.

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

Лицензия, плагины и подключение GSAP

За что отвечает параметр ease в GSAP?

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

Какие ограничения у бесплатной лицензии GSAP?

Для сайтов, магазинов и приложений никаких: с весны 2025 года библиотека со всеми плагинами бесплатна и в коммерческих проектах. Нельзя только делать на ней конструктор анимаций без кода, который конкурирует с Webflow. Открытой в смысле MIT лицензия при этом не стала, права на код у Webflow.

Какие сцены собирают на ScrollTrigger?

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

Как анимировать заголовок по буквам и не сломать его для экранных читалок?

Разбить текст плагином SplitText и анимировать буквы таймлайном. Плагин сам расставляет атрибуты доступности, поэтому читалка произнесёт заголовок целиком. Если резать текст на отдельные span вручную, об этом придётся позаботиться самому, иначе незрячий посетитель услышит набор букв.

Как подключить GSAP к React-компоненту?

Через официальный пакет @gsap/react и хук useGSAP. Анимации внутри хука привязаны к компоненту: когда он исчезает со страницы, GSAP сам их откатывает и снимает триггеры прокрутки. Без этого в одностраничном приложении старые анимации копятся при каждом переходе и мешают новым.

В каких случаях хватит CSS-анимации без GSAP?

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

Что такое GSAP skills?

Это официальный набор инструкций от команды GSAP для ИИ-ассистентов, которые пишут код, например Claude Code и Cursor. С ним ассистент правильнее работает с ядром библиотеки, ScrollTrigger и плагинами.

Что увидит посетитель, если скрипт GSAP не загрузился?

Зависит от того, как спрятаны блоки до анимации. Если их скрыли в CSS, человек увидит пустые места вместо текста и кнопок. Надёжнее задавать начальное состояние из самого скрипта: тогда без GSAP страница просто откроется без движения.