GSAP and ScrollTrigger

What GSAP is

GSAP (the GreenSock Animation Platform) is the animation library used on most award-winning sites (Awwwards): agencies, product launches, scroll storytelling. It animates any numeric value — CSS, SVG, canvas, JS objects — with very fine control over time. Since 2025, GSAP and all its plugins (ScrollTrigger, SplitText, MorphSVG) are free.

npm i gsap @gsap/react

The three basic methods

gsap.to('.box', { x: 200, rotation: 90, duration: 1, ease: 'power3.out' })   // from the current state to
gsap.from('.title', { y: 40, opacity: 0, duration: 0.6 })                    // from the given values to the current state
gsap.fromTo('.bar', { scaleX: 0 }, { scaleX: 1, duration: 0.8 })             // both ends explicitly

x, y, rotation, scale are shorthands for transform — performant.

Timelines — sequences

GSAP's strength: you orchestrate dozens of animations on a time axis, without hand-calculated delays.

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')      // starts 0.3s before the previous one ends
  .from('.cta', { scale: 0.8, opacity: 0 }, '<')        // at the same time as the previous one
  .from('.card', { y: 30, opacity: 0, stagger: 0.1 }, '+=0.2')

The timeline can be controlled: tl.pause(), tl.reverse(), tl.progress(0.5).

ScrollTrigger — animations tied to scrolling

gsap.registerPlugin(ScrollTrigger)

gsap.from('.feature', {
  y: 60,
  opacity: 0,
  stagger: 0.15,
  scrollTrigger: { trigger: '.features', start: 'top 80%' },     // starts when the section reaches 80% of the screen
})

gsap.to('.hero-image', {
  scale: 1.3,
  scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true },  // tied to the scroll position
})

GSAP in 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 },          // the selectors search only inside the container
  )

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

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

useGSAP automatically cleans up on unmount (and in Strict Mode) — without it, animations and ScrollTriggers stay hanging around between pages.

Motion or GSAP?

You don't have to choose: many projects use Motion for the UI and GSAP for the showcase page.

Summary

• gsap.to / from / fromTo with duration in seconds, ease, stagger.
• A timeline + the position parameter ('<', '-=0.3') for sequences.
• ScrollTrigger for scrolling (start, scrub, pin); in React always useGSAP with a scope.

Official sources

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