TILs, snippets—my digital code garden 🌱.

All notes 11ty a11y ai animation api backend cheatsheet cli computer-science cpp css cypress deno dev devops git golang graphql html interview javascript messaging networking node performance php python questions react rust services sql storybook svelte sveltekit testing typescript typography vscode

GSAP

https://greensock.com/docs/v3/GSAP
animation react javascript

GSAP

Eases

https://greensock.com/docs/v3/Eases

ScrollTrigger

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

With React (useGSAP hook)

For React 18+, GSAP provides the @gsap/react package with a useGSAP hook that handles cleanup automatically.

npm install @gsap/react
import { useRef } from 'react'
import gsap from 'gsap'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(useGSAP)

const MyComponent = () => {
  const container = useRef<HTMLDivElement>(null)

  useGSAP(
    () => {
      // All GSAP animations in here are scoped to the container
      // and automatically cleaned up when the component unmounts
      gsap.to('.box', { x: 100, duration: 1 })
    },
    { scope: container }
  )

  return (
    <div ref={container}>
      <div className="box">Animated</div>
    </div>
  )
}

With dependencies

useGSAP(
  () => {
    gsap.to('.box', { x: isActive ? 200 : 0 })
  },
  { scope: container, dependencies: [isActive] }
)

With ScrollTrigger

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

gsap.registerPlugin(ScrollTrigger, useGSAP)

const ScrollAnimation = () => {
  const container = useRef<HTMLDivElement>(null)

  useGSAP(
    () => {
      gsap.to('.box', {
        y: 100,
        scrollTrigger: {
          trigger: '.box',
          start: 'top center',
          end: 'bottom center',
          scrub: true,
        },
      })
    },
    { scope: container }
  )

  return (
    <div ref={container}>
      <div className="box">Scroll-driven</div>
    </div>
  )
}

Context-safe callbacks

For event handlers or callbacks, use contextSafe:

const { contextSafe } = useGSAP({ scope: container })

const handleClick = contextSafe(() => {
  gsap.to('.box', { rotation: 360 })
})

return <button onClick={handleClick}>Rotate</button>

Legacy approach (manual cleanup)

If you can’t use @gsap/react, handle cleanup manually:

useEffect(() => {
  const ctx = gsap.context(() => {
    gsap.to('.box', { x: 100 })
  }, container)

  return () => ctx.revert()
}, [])

ScrollTo

import gsap from 'gsap'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
gsap.registerPlugin(ScrollToPlugin)