Sign in to confirm you’re not a bot
This helps protect our community. Learn more

EASY React Animation with useGSAP()

GSAP Learning
38.2K subscribers
<__slot-el>
<__slot-el>
127K views 1 year ago
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! ...more
...more
EASY React Animation with useGSAP()
3.6KLikes
127,748Views
2024Jan 23
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!

Follow along using the transcript.

GSAP Learning

38.2K subscribers