New Hook Just Dropped

Over the past few years, I've primarily relied on Framer Motion for handling my animations, while incorporating GSAP from time to time, I found it to be somewhat verbose compared to **Framer**, especially in a **React** context. But, check this out, yesterday **GSAP** introduced the **``useGSAP()``** hook, an addition to easily integrate **GSAP** with **React**. Prior to this, animating elements involved wrapping them in a **``gsap.Context``** object, then, you had to use the same object's methods like **``.revert()``** or **``.kill()``** within **``useEffect()``** or **``useLayoutEffect()``**'s cleanup function to avoid memory leaks, depending if you're within an **SSR** context or not, along with a mandatory dependency array that you have to keep track of. It's just a lot of overhead really to do something silly like You'd need to { const container = useRef(null); useIsoLayoutEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.5 }); tl.to('.x', { rotation: 360, duration: 2, borderRadius: 16, translateX: -150, ease: 'power1.inOut', }); tl.to('.x', { rotation: -360, duration: 2, borderRadius: 0, translateX: 150, ease: 'power1.inOut', }); tl.to('.x', { rotation: 360, duration: 2, borderRadius: 16, translateX: 0, ease: 'power1.inOut', }); }, container); return () => ctx.revert(); }, []); return ( ); }; `} language="tsx" showLineNumbers={false} /> This new hook abstracts away these inconveniences, and obviates the need for explicit cleanup. So the same logic above can be written as { const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.5 }); tl.to('.x', { rotation: 360, duration: 2, borderRadius: 16, translateX: -150, ease: 'power1.inOut', }); tl.to('.x', { rotation: -360, duration: 2, borderRadius: 0, translateX: 150, ease: 'power1.inOut', }); tl.to('.x', { rotation: 360, duration: 2, borderRadius: 16, translateX: 0, ease: 'power1.inOut', }); }, { scope: container} ); `} language="tsx" showLineNumbers={false} /> It looks hella cleaner IMO, I actually like this update, I mean it's not a lot but hey, it gets the job done a lot easier so, I might use even more now, and sorry if you thought this is an educational post where I teach you about **GSAP**, nope, I'm just glad they introduced this new hook, that's it.

Unclassified, raw

GSAP