GSAP și ScrollTrigger

Ce este GSAP

GSAP (GreenSock Animation Platform) e librăria de animație folosită pe majoritatea site-urilor premiate (Awwwards): agenții, lansări de produs, scroll storytelling. Animă orice valoare numerică — CSS, SVG, canvas, obiecte JS — cu un control foarte fin asupra timpului. Din 2025, GSAP și toate plugin-urile (ScrollTrigger, SplitText, MorphSVG) sunt gratuite.

npm i gsap @gsap/react

Cele trei metode de bază

gsap.to('.box', { x: 200, rotation: 90, duration: 1, ease: 'power3.out' })   // de la starea actuală spre
gsap.from('.title', { y: 40, opacity: 0, duration: 0.6 })                    // de la valorile date spre starea actuală
gsap.fromTo('.bar', { scaleX: 0 }, { scaleX: 1, duration: 0.8 })             // ambele capete explicit

x, y, rotation, scale sunt prescurtări pentru transform — performante.

Timeline — secvențe

Puterea GSAP: orchestrezi zeci de animații pe o axă de timp, fără delay-uri calculate de mână.

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')      // începe cu 0.3s înainte să se termine precedenta
  .from('.cta', { scale: 0.8, opacity: 0 }, '<')        // în același timp cu precedenta
  .from('.card', { y: 30, opacity: 0, stagger: 0.1 }, '+=0.2')

Timeline-ul se poate controla: tl.pause(), tl.reverse(), tl.progress(0.5).

ScrollTrigger — animații legate de scroll

gsap.registerPlugin(ScrollTrigger)

gsap.from('.feature', {
  y: 60,
  opacity: 0,
  stagger: 0.15,
  scrollTrigger: { trigger: '.features', start: 'top 80%' },     // pornește când secțiunea ajunge la 80% din ecran
})

gsap.to('.hero-image', {
  scale: 1.3,
  scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true },  // legat de poziția scroll-ului
})

GSAP în 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 },          // selectorii caută doar în container
  )

  const { contextSafe } = useGSAP({ scope: container })
  const spin = contextSafe(() => gsap.to('.logo', { rotation: '+=360' }))   // animații din event handlers

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

useGSAP face automat cleanup la demontare (și în Strict Mode) — fără el, animațiile și ScrollTrigger-ele rămân agățate între pagini.

Motion sau GSAP?

Nu e obligatoriu să alegi: multe proiecte folosesc Motion pentru UI și GSAP pentru pagina de prezentare.

Pe scurt

• gsap.to / from / fromTo cu duration în secunde, ease, stagger.
• Timeline + parametrul de poziție ('<', '-=0.3') pentru secvențe.
• ScrollTrigger pentru scroll (start, scrub, pin); în React mereu useGSAP cu scope.

Surse oficiale

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