GSAP и ScrollTrigger

Что такое GSAP

GSAP (GreenSock Animation Platform) — библиотека анимаций, которую используют на большинстве сайтов-победителей Awwwards: агентства, запуски продуктов, сторителлинг на прокрутке. Она анимирует любое числовое значение — CSS, SVG, canvas, объекты JS — с очень тонким контролем времени. С 2025 года GSAP и все его плагины (ScrollTrigger, SplitText, MorphSVG) бесплатны.

npm i gsap @gsap/react

Три базовых метода

gsap.to('.box', { x: 200, rotation: 90, duration: 1, ease: 'power3.out' })   // от текущего состояния к
gsap.from('.title', { y: 40, opacity: 0, duration: 0.6 })                    // от заданных значений к текущему состоянию
gsap.fromTo('.bar', { scaleX: 0 }, { scaleX: 1, duration: 0.8 })             // оба конца явно

x, y, rotation, scale — сокращения для transform, они производительны.

Таймлайн — последовательности

Сила GSAP: вы оркеструете десятки анимаций на оси времени без вручную посчитанных delay.

const tl = gsap.timeline({ defaults: { duration: 0.6, ease: 'power3.out' } })

tl.from('.logo', { y: -20, opacity: 0 })
  .from('.title', { y: 40, opacity: 0 }, '-=0.3')      // стартует за 0.3 с до конца предыдущей
  .from('.cta', { scale: 0.8, opacity: 0 }, '<')        // одновременно с предыдущей
  .from('.card', { y: 30, opacity: 0, stagger: 0.1 }, '+=0.2')

Таймлайном можно управлять: tl.pause(), tl.reverse(), tl.progress(0.5).

ScrollTrigger — анимации, привязанные к прокрутке

gsap.registerPlugin(ScrollTrigger)

gsap.from('.feature', {
  y: 60,
  opacity: 0,
  stagger: 0.15,
  scrollTrigger: { trigger: '.features', start: 'top 80%' },     // стартует, когда секция доходит до 80% экрана
})

gsap.to('.hero-image', {
  scale: 1.3,
  scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true },  // привязано к позиции прокрутки
})

GSAP в React / Next: useGSAP

'use client'
import { useRef } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(useGSAP, ScrollTrigger)

export function Hero() {
  const container = useRef<HTMLElement>(null)

  useGSAP(
    () => {
      gsap.from('.word', { y: '100%', opacity: 0, stagger: 0.05, ease: 'power4.out' })
    },
    { scope: container },          // селекторы ищут только внутри контейнера
  )

  const { contextSafe } = useGSAP({ scope: container })
  const spin = contextSafe(() => gsap.to('.logo', { rotation: '+=360' }))   // анимации из обработчиков событий

  return <section ref={container}>...</section>
}

useGSAP автоматически делает очистку при размонтировании (и в Strict Mode) — без него анимации и ScrollTrigger-ы остаются висеть между страницами.

Motion или GSAP?

Выбирать не обязательно: многие проекты используют Motion для интерфейса и GSAP для промо-страницы.

Коротко

• gsap.to / from / fromTo с duration в секундах, ease, stagger.
• Таймлайн + параметр позиции ('<', '-=0.3') для последовательностей.
• ScrollTrigger для прокрутки (start, scrub, pin); в React — всегда useGSAP со scope.

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

• GSAP — Getting started
• GSAP — Timelines
• GSAP — ScrollTrigger
• GSAP — React & useGSAP