Mastering GSAP Animations in React

GSAP (GreenSock Animation Platform) is the gold standard for web animations. Here's how to integrate it effectively with React.

Setting Up GSAP

First, install GSAP and its React plugin:

npm install gsap @gsap/react

Using gsap.context()

Always scope your animations with gsap.context() for proper cleanup:

useEffect(() => {
  const ctx = gsap.context(() => {
    gsap.from(element, { opacity: 0, y: 20 })
  })
  return () => ctx.revert()
}, [])

ScrollTrigger Animations

ScrollTrigger lets you trigger animations based on scroll position.

Performance Tips

• Use will-change: transform on animated elements
• Respect prefers-reduced-motion
• Scope animations properly