best way to animate button on hover in react

[Sherlok]

Hello,

I try to do onMouseEnter and onMouseLeave animation timeline.

The example is located here https://codesandbox.io/s/serene-lena-5o2lhi?file=/src/App.js

I store my timeline in useRef and then onEnter I use currentTarget and then just create the timeline and assign it tlRef. And in onLeave function I just do the reverse.

From the first view, it seems it works fine, but when I try to hover and leave quickly and do it multiple times and the animation gets stuck.

Could you please explain where I am wrong and what is the best practice for that?

 

[Cassie]

Heya, something like this should work

https://codesandbox.io/s/dreamy-snowflake-d91u3q?file=/src/App.js

You don't want to be creating a new timeline every time you hover. timelines are also for sequences of animations, if you have one action happening on hover you can just use a tween.

We have a whole guide here if you'd like to know more about best practises in React
 

 

Good luck!

 

[Sherlok]

Thanks for your reply @Cassie

and what if have complex button with icon and I want to move icon on hover and also overlay? Should I use the same principle and don’t create the timeline inside the hover function?

 

Just modify your example 

https://codesandbox.io/s/runtime-rgb-kdtvbj?file=/src/App.js

 

Seems it works fine. Actually my main concern is not to rewrite the same animation in onMouseLeave function. So, just wondering is it ok to write in context like this?

[Cassie]

Yep, that's the idea!

 

One tweak, keep all your animations inside the GSAP context so that they get killed on cleanup. ☺️
 

useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    gsap.set(overlay.current, { xPercent: -100 });

    tl.current = gsap.timeline({ paused: true })
    .to(".text", { color: "black" })
    .to(".overlay", { xPercent: 0 }, "<");
  });

  return () => ctx.revert();
}, []);