5 GSAP Tips for Smoother React Animations

1. Use useGSAP for automatic cleanup

The @gsap/react package's useGSAP hook handles teardown automatically on unmount and dependency changes — no more stale tweens firing after a component is gone, and no manually-written cleanup functions to forget.

2. Scope your selectors

Always pass a ref to useGSAP's scope option so your string selectors (like ".card") only match elements inside that component — not identically-named elements anywhere else on the page.

3. Leverage ScrollTrigger's matchMedia

Different animations for desktop and mobile — or disabling motion entirely below a breakpoint — are handled cleanly with ScrollTrigger.matchMedia() instead of manually branching your animation code on screen width.

4. Avoid animating layout-inducing properties

Stick to transform and opacity. Animating width, height, top, or left forces the browser to recompute layout on every frame — the difference between a smooth 60fps animation and a visibly janky one is often exactly this.

5. Use contextSafe() for animations outside your effect

Event handlers added after the initial useGSAP run — like a hover or click handler that creates a new tween — aren't automatically tracked by useGSAP's cleanup. Wrapping them with the contextSafe() function useGSAP provides keeps them properly scoped and cleaned up too, instead of silently leaking outside React's lifecycle.