Scroll / storytelling · gsap-scrolltrigger

GSAP ScrollTrigger

Плагин GSAP, без которого не бывает scroll-фильма

Tier 2СреднеОсторожно на мобилеfree (MIT, в составе GSAP)Любой JS + GSAP

Design DNA

«Скролл = таймлайн. Каждая секция — кадр, а не просто блок текста.»

Use with AI

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

В проекте уже есть или ставим GSAP. Сфокусируйся на ScrollTrigger.
Сделай 1–2 pinned секции + scrub анимацию.
Раскадровка обязательна. Mobile: меньше pin, упростить.
Cleanup при unmount. prefers-reduced-motion → статичный layout.
Референс: /demo/scroll-film.

Что умеет

·pin / scrub / snap
·триггеры на % viewport
·батчи анимаций при скролле
·связка с Lenis

Чего не умеет

·Не заменяет дизайн композиции
·Без раскадровки получается хаос

Когда брать

·Сайт-фильм
·Product reveal по скроллу
·Параллакс и кинематографичные секции

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

·Только fade-in блоков → Motion / AutoAnimate
·Нужна игра → Phaser

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

GSAPLenisSplitTypeScrollSmoother

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

CSS scroll-driven animationsIntersection Observer + CSS

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

·Слишком много pin на mobile
·Забыть kill()/cleanup
·Игнор reduced-motion
·Не проверил производительность на iPhone SE. WebGL и AI-модели могут убить батарею или вызвать краш. Всегда делай фоллбэк на статику через matchMedia или детект мощности устройства.

Демо и ссылки

ScrollTrigger docs Демо ProektMap