Best way to hover/mouse animations in React 2025?

[KirillCuervo]

Hi, Im new here!
I just started to use GSAP in order to animate things in my website, but the thing is that I'm not sure what's the best way to make a complex button like for example this one, I know I have to use useGSAP, useRef and Timeline in order to make complex animations,
But I'm not sure how to trigger mouseenter or mouseleave and how would look a button component with the best use guides for performance.

 

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 

 

Before you know it, things will fall into place one at a time.

 

You'll get a lot more people willing to help you if you keep things very simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[mvaneijgen]

Hi @KirillCuervo welcome to the forum! 

 

I would not worry about any of the optimise or what is the best way to do X at the moment. I would suggest just opening up a Codepen and start playing with the tools to get a feeling for what is possible and how things could work. 

 

At the heart of almost any GSAP animation lies a timeline, which is just a bunch of tween stitched together to form the animation you're after. With that animation you can have it happen like you want on mouse enter/leave or on scroll or on any other interaction you can think of, but you first need to have a working animation.

 

Personally I always start with all my animations on a place like Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck.

Here is a starter template which loads all the plugins 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

After you've got some animation working check out our own @Carl's tutorial to create distinct enter and leave animation. Hope it helps and happy tweening! 

 

 

 

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

 

Finally the logic in this demo can help understanding how to create an animation on mouseenter/leave:

See the Pen eYaeray by GreenSock (@GreenSock) on CodePen.

You just need to create handlers on the specific React synthetic events:
https://react.dev/reference/react-dom/components/common#mouseevent-handler