animation GSAP's Own Button Hover Animation

[Samrat]

I am trying to get help to create your own website Get GSAP button Hover animation effect.

[GSAP Helper]

Hi @Samrat and welcome to the GSAP Forums!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

We don't have a demo in our collection for that particular button, but perhaps this can help you getting started:

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

 

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

 

From the second demo you can get the logic to create separation between words and combine it with the first one.

[Samrat]

Really thanks for the help anyways, And I understand the resource issue on free general consultation. I will check the demos.

[Iryna_web]

Hi
I tried to create a button like that, but there's a problem — the animation breaks if you hover too often.

Could you please tell me how to fix this?

See the Pen ByoQPEj by cqyfddqt-the-reactor (@cqyfddqt-the-reactor) on CodePen.

[Iryna_web]

I’ve already found a solution and updated the CodePen.
I’m open to any feedback on how to improve the code. 😊

[Samrat]

11 minutes ago, Iryna_web said:

I’ve already found a solution and updated the CodePen.
I’m open to any feedback on how to improve the code. 😊

Hey I just checked your code, I see how you managed to do it, I also ran into same problem just few hours ago so I though I will just ask once if anyone else ran into same.

[Rodrigo]

Hi,

 

Great job!

 

I  would lean for something like this:

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

 

No need to create the Timeline on  every mouseenter event. Also I'm pretty sure that there could be better ways for this, but this is performant and does the job.

 

Hopefully this helps

Happy Tweening!

[Iryna_web]

Rodrigo, thank you for helping me improve the code — I really appreciate it!

 

10 hours ago, Rodrigo said:

No need to create the Timeline on  every mouseenter event

I’m still learning — could you explain why that’s not recommended? Does it affect performance?

[mvaneijgen]

1 hour ago, Iryna_web said:

could you explain why that’s not recommended?

When you tell GSAP to make an animation it will figure out all the calculations it needs to do, so that when it is time to play that animation it will be as fast as possible. In your initial setup these calculations happen each time you hover the element, but the animation never changes, so instead of needing to calculate them each time, just make the animation once and then just tell GSAP to .restart() that same animation that has already been made. 

 

Hope it helps and happy tweening! 

[Iryna_web]

@mvaneijgen Thanks a lot

[Iryna_web]

15 hours ago, Samrat said:

I though I will just ask once if anyone else ran into same.

This happens because the mouseenter event triggers the animation on hover. The animation doesn’t have time to finish before it needs to start again and again — that’s why everything breaks.

[Rodrigo]

5 hours ago, Iryna_web said:

Rodrigo, thank you for helping me improve the code — I really appreciate it!

 

I’m still learning — could you explain why that’s not recommended? Does it affect performance?

On top of @mvaneijgen's excellent explanation is worth extending on it and explaining why is that the reason for the behaviour you were seeing when moving the mouse pointer back into the button before the animation was completed. As Mitchel mentions when you create a Tween/Timeline GSAP records the initial values of the elements (the current styles they have) in order to set the final values and interpolate between them. The issue in your setup is that when you move the mouse back to the button and the animation wasn't completed GSAP took those values as the starting values so the animation started and ended with those values. Consider that you have a box that moves to x: 100 and then returns to x: 0 when you hover a trigger (doesn't has to be the same element, but just call it the trigger element for simplicity). At first the initial X value of the box is 0, you hover on the trigger and the animation is created and starts. Then you move the mouse back into the trigger but what happens if the box X value is 25, GSAP will create a new Tween that will take the element from 25 (the initial recorded value) to 100 and then back again to 25, it never goes back to 0 again which is what you are expecting. See the problem? That is exactly what was happening in your first demo.

 

Hopefully this clear things up

Happy Tweening!

[Iryna_web]

@Rodrigo Thank you for the detailed explanation.