EASY React Animation with useGSAP()

GSAP itself is completely framework-agnostic and can be used in any JS framework without any special wrappers or dependencies. However, this hook solves a few React-specific friction points for you so that you can just focus on the fun stuff. 🤘🏻

useGSAP() is a drop-in replacement for useEffect() or useLayoutEffect() that automatically handles cleanup using gsap.context().

Import the useGSAP() hook from @gsap/react and you're good to go! All GSAP animations, ScrollTriggers, Draggables, and SplitText instances created when the useGSAP() hook executes will be reverted automatically when the component unmounts and the hook is torn down.

To learn more, head over to gsap.com/react

@gsap/react on npm → https://www.npmjs.com/package/@gsap/r...
codepen starter → https://codepen.io/GreenSock/pen/OJmQvLZ
StackBlitz starter → https://stackblitz.com/edit/gsap-reac...

----- Video Contents -----

00:00 - Intro
01:02 - What is useGSAP?
01:22 - Why is it useful in React?
02:21 - Cleanup with gsap.context (the old way)
03:19 - useGSAP() (the new way)
04:13 - Scope for selector text
06:04 - Dependencies (reacting to changes in state)
08:10 - contextSafe (animating on interaction)
12:09 - Bye!