GSAP-анимации на сайте: разработка с ScrollTrigger и MorphSVG

Почему GSAP — стандарт для сложных анимаций

GSAP (GreenSock Animation Platform) — промышленный стандарт для сложных веб-анимаций. В отличие от CSS-анимаций, GSAP даёт точный контроль над временными линиями, поддерживает группировку и последовательности, работает стабильно в Safari и корректно паузирует/реваиндирует. Платная лицензия нужна только для плагинов (ScrollTrigger, MorphSVG и т.д.) — базовый GSAP 3 бесплатен и достаточен для большинства задач. Мы используем GSAP в продакшне более 5 лет, и за это время не было случаев, когда CSS-анимация могла бы заменить сложный таймлайн с перекрытием и кастомными ease. На сегодняшний день GSAP 3 обеспечивает 60fps на устройствах с производительностью среднего сегмента, благодаря оптимизации только transform и opacity.

Как GSAP решает проблему контроля анимаций?

GSAP предоставляет временные линии (timelines), которые позволяют выстраивать последовательности и группировать анимации. Это критично для интерфейсов с множеством взаимосвязанных элементов: появление заголовка, подзаголовка, CTA и изображения должно происходить не хаотично, а с задержками и перекрытием. ScrollTrigger добавляет управление по скроллу: pin-секции, параллакс, горизонтальный скролл. Все это работает на мобильных устройствах без тормозов — достаточно включить ignoreMobileResize.

Как мы реализуем сложные анимации

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

1. Анализ задачи — определяем точки входа, интерактивные элементы, необходимость MorphSVG.
2. Проектирование — разрабатываем временные линии (timelines), продумываем логику ScrollTrigger.
3. Реализация — пишем код с использованием gsap.context() для изоляции компонентов в React/Next.js.
4. Оптимизация — анимируем только transform и opacity, избегаем reflow, используем gsap.set() для начальных состояний.
5. Тестирование — проверяем на реальных устройствах и в браузерах (Chrome, Safari, Firefox, Edge).
6. Сопровождение — передаём код с комментариями и инструкцией по настройке.

Пример кейса: анимация для лендинга fintech-стартапа

Заказчик хотел Hero-сцену с появлением элементов, спикер-карточки со stagger при скролле и горизонтальный скролл для таймлайна продукта. Мы реализовали всё на GSAP 3 + ScrollTrigger. Результат: LCP ≤ 1.5 секунды, анимации не блокируют ввод данных. Обратитесь к нам для оценки вашего проекта.

// lib/gsap.ts — централизованная инициализация import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { ScrollToPlugin } from 'gsap/ScrollToPlugin' if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollTrigger, ScrollToPlugin) gsap.config({ nullTargetWarn: false, trialWarn: false }) ScrollTrigger.config({ ignoreMobileResize: true }) } export { gsap, ScrollTrigger } 

Как избежать проблем с SSR в Next.js?

GSAP не должен выполняться на сервере. Используйте динамический импорт с ssr: false или проверку typeof window. В примере ниже показан обязательный паттерн для React-компонентов:

// components/HeroSection.tsx — обязательный паттерн gsap.context() import { useEffect, useRef } from 'react' import { gsap } from '../lib/gsap' export function HeroSection() { const containerRef = useRef<HTMLDivElement>(null) const headlineRef = useRef<HTMLHeadingElement>(null) const sublineRef = useRef<HTMLParagraphElement>(null) const ctaRef = useRef<HTMLButtonElement>(null) const imageRef = useRef<HTMLDivElement>(null) useEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline({ defaults: { ease: 'power3.out', duration: 0.8 } }) tl .from(headlineRef.current, { y: 60, opacity: 0, duration: 1 }) .from(sublineRef.current, { y: 40, opacity: 0 }, '-=0.5') .from(ctaRef.current, { y: 20, opacity: 0, scale: 0.95 }, '-=0.4') .from(imageRef.current, { x: 80, opacity: 0, duration: 1.2, ease: 'power2.out' }, '<-0.6') }, containerRef) return () => ctx.revert() }, []) return ( <div ref={containerRef} className="hero-container"> <h1 ref={headlineRef}>Заголовок</h1> <p ref={sublineRef}>Подзаголовок</p> <button ref={ctaRef}>Начать</button> <div ref={imageRef} className="hero-image" /> </div> ) } 

Что выбрать: GSAP или CSS-анимации?

GreenSock Docs утверждают: «GSAP — самое производительное решение для анимации в вебе без использования WebGL». Это подтверждается на практике — даже на мобильных устройствах с ограниченными ресурсами.

Типичные ошибки и как их избежать

• Забыли про gsap.context() — в React анимации не очищаются при демонтировании, приводят к утечкам. Всегда используйте контекст.
• Анимируем не transform/opacity — например, width или margin вызывают reflow, падает FPS. Используйте scale, x, y, opacity.
• ScrollTrigger некорректно работает на мобильных — включите ignoreMobileResize. Проверяйте на реальных устройствах.
• Попытка анимировать псевдоэлементы — GSAP не может напрямую анимировать ::before/::after. Используйте вложенные элементы.

Что входит в работу

• Исходный код компонентов с комментариями.
• Документация по настройке ScrollTrigger, ссылки на документацию GSAP.
• Адаптация под мобильные устройства (touch-события, resize).
• Тестирование в современных браузерах (Chrome, Safari, Firefox, Edge).
• Месяц поддержки после сдачи — исправления багов и мелкие доработки.

Процесс работы

Сроки и стоимость

• Hero-анимация + 2–3 ScrollTrigger-секции — 1–2 рабочих дня.
• Полный набор анимаций для лендинга (горизонтальный скролл, pin-секции, stagger-списки, параллакс) — 4–6 рабочих дней.
• Сложные интерактивные сцены — отдельная оценка после технического задания.

Стоимость рассчитывается индивидуально в зависимости от сложности и объёма. Мы предоставляем прозрачную смету до начала работ. Свяжитесь с нами для оценки проекта. Закажите разработку анимаций под ключ — получите плавный интерфейс, который удерживает внимание пользователей.