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. 🤘🏻

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.

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

00:00 - Intro
01:02 - What is useGSAP?
01:22 - Why is it useful in React?
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!

[paakofibamfoquaicoe]

Your laughing and smiling throughout the video makes me happy. Great video. Thank you.

[shash_]

Clear, succinct and comprehensive. Your calm energy is just cherry on top!

[CodingWithLewis]

This is such a great channel. Love the production quality.

[arkondigital]

This is the best tutorial I've watched recently in terms of clean delivery and the chill and happy energy you both give out!

[shableep]

whoa this got released just in time for me to build my portfolio site. thank you! you're covering so many important essentials and esoteric React concepts.

[chrisandrew_tv]

That's the affectionate and mildly manic smile all develop who have dared attempt complex GSAP animations in React 18 (because it's better to smile than to cry) 😂

[mr-skorpion]

Beautiful addition to Gsap React ecosystem, thank you team GSAP 👍✨

[sirajahmed]

Wow!
It always pained me how hard it was to use gsap with React, and I'm glad a proper hook was created that addresses all the issues. Very excited to use this, amazing work by GSAP team!

[montoyland]

I love how you incorporated Brody into your presentation! It's a testament to your natural ability to go with the flow that, while appears so effortless, takes great skill. Your instructions were clear and speak to larger concerns all React developers should consider even beyond specifically using GSAP. Thanks for the obvious effort you took to show us best practices!

[metalyx]

Had these issues with cleaning up and killing animations, it's perfect you have a hook. Works amazing, just plug and play 👏

[kapeeshmanilal]

Oh I've been waiting for this! Good work team! 💚

[Michael-Martell]

Props to all your hard work, not only on this video, but on the documentation and the Starter examples on Stack blitz. It’s extremely helpful! I’ll be playing with it this week and I think I’ll be finally taking the leap into Paid GSAP after my next check! Thanks for all you do!

[snorklTV]

wow. fantastic job on the video! editing is crazy good. can't even imagine how long it took to put it all together and have it flow so well.

[AntoineDelcourte]

Amazing work here, seeing the react hook type syntax with GSAP in it on the thumbnail blew my mind. As always, excellent tutorial by Cassie and great documentation. Will definitely be using it soon enough !

[shadowslayer]

Her smile is as beautiful as the easy integration of GSAP with React and smoothness by which GSAP controls and animates the DOM elements. Thank you instructor and mainly thank you developers for the useGSAP hook which makes it so easy, gimme a second to acknowledge your greatness 🙇‍♂🙇‍♂🙏🙏

[jior]

It should be illegal to use your guys' platform for free. I'm absolutely blown away how vastly superior GSAP compares to other animation solutions. Very well done.

[anthni]

This is awesome. Now I can actually try GSAP in my projects

[fortysyv]

This is so awesome. I started my animation journey with gsap but had to switch when I started working in react. I'm so glad you found a solution for the too many refs problem. Thank you. Definitely gonna try this out in my next project

[Amapramaadhy]

Great content along with an amazing and infectious energy 💖💖

[aaravgavshinde]

Took a little too much brain cells to understand, but got it watching twice! Nice video, thanks a lot!