GSAP Animations in React: Patterns that Work

GSAP and React can coexist beautifully if you follow a few rules. The key: always target DOM elements via refs, never by class selector.

Use useRef, Not Selectors

Class selectors break in concurrent mode and server-side rendering. Always attach a useRef and pass ref.current to GSAP.

Clean Up in useEffect

Always return a cleanup function from useEffect that kills your GSAP timelines: return () => tl.kill(). Otherwise you get memory leaks on navigation.