Scroll / storytelling · gsap

GSAP

Движок плавной анимации для сайтов — от кнопок до scroll-фильмов

Tier 2СреднеОсторожно на мобилеfree (MIT)HTML/CSS/JS, React, Next, Vue

Design DNA

«Сайт ведёт себя как режиссёрская склейка: скролл = пульт камеры, не просто длинная страница.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Используй GSAP + ScrollTrigger в текущем проекте.

Цель: scroll-driven секция (сайт-фильм), не декоративный шум.

Сделай:
1) раскадровку 3–5 битов (что происходит на % скролла);
2) pin ключевой секции при необходимости;
3) scrub там, где движение привязано к скроллу;
4) уважение prefers-reduced-motion (отключить/упростить);
5) не ставь лишние библиотеки без нужды;
6) адаптируй под наш стек и существующие токены/компоненты.

Не копируй чужой код один в один — реализуй решение в архитектуре проекта.
Референс ProektMap: /demo/scroll-film и docs/SCROLL-FILM.md.
Для побуквенного текста см. также SplitType (карточка splittype).

Что умеет

·Плавные анимации любых CSS/JS-свойств
·ScrollTrigger — pin, scrub, привязка к скроллу
·Timelines — сценарии «сначала A, потом B»
·Связка с Lenis / Three / Spline
·Можно заложить prefers-reduced-motion

Чего не умеет

·Не рисует 3D-мир (нужен Three.js / Spline)
·Не заменяет композицию и типографику
·Не сделает «красиво» без раскадровки

Когда брать

·Нужен wow-лендинг или сайт-фильм
·Анимация синхронизирована со скроллом
·Есть Next/React и нужен сильный motion-слой

Когда не брать

·Простой fade-in секций — хватит Motion или CSS
·Нужна полноценная игра — Phaser
·Нужен 3D-персонаж из редактора — Rive / Spline

С чем сочетается

LenisScrollTriggerSplitTypeThree.js / R3FSpline

Альтернативы

MotionCSS scroll-drivenTheatre.js

Типичные ошибки

·Анимировать всё подряд → шум и лаги
·Забыть mobile и reduced-motion
·Сказать агенту «сделай красиво на GSAP» без раскадровки
·Путать GSAP с Three.js
·Делать scroll-фильм без ScrollTrigger
·Не проверил производительность на iPhone SE. WebGL и AI-модели могут убить батарею или вызвать краш. Всегда делай фоллбэк на статику через matchMedia или детект мощности устройства.

Демо и ссылки

Демо ProektMap — scroll-film gsap.com