GSAP | Zander's Code Notes

On this page

GSAP Jump to heading

Docs: https://greensock.com/docs/v3/GSAP
Cheatsheet: https://greensock.com/cheatsheet/

Eases Jump to heading

ScrollTrigger Jump to heading

Docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger
Demos: https://greensock.com/st-demos/

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

With React (useGSAP hook) Jump to heading

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 Jump to heading

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

With ScrollTrigger Jump to heading

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 Jump to heading

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) Jump to heading

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 Jump to heading

Docs: https://greensock.com/docs/v3/Plugins/ScrollToPlugin
Demos: https://greensock.com/st-demos/

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

Useful links: Jump to heading

← Back home