How to create this mouse hover animation?

[Display Name 0 Likes (Newbie)]

Hello! 👋🏻
 

GSAP you are the best!
 

I would be very grateful if you could help get this animation when hovering the cursor changes text and color as well as text as if inside a circle.

I've been looking for a very long time for a solution but couldn't find one.
 

Thank you very much in advance!
 

 

[GSAP Helper 122 Likes (Specialist)]

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 if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and 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. 

[Display Name 0 Likes (Newbie)]

I would be glad if someone could help me understand if it is possible to get such an effect with GSAP

[Display Name 0 Likes (Newbie)]

[Cassie 5,650 Likes (Superhero)]

You're looking for 'masking'

 

https://www.google.com/search?q=svg+masking+site%3Agreensock.com&oq=svg+masking+site%3Agreensock.com&aqs=chrome..69i57.5040j0j7&sourceid=chrome&ie=UTF-8

 

 

Good luck, pop back if you have a minimal demo and need specific help

[Display Name 0 Likes (Newbie)]

On 5/24/2023 at 3:54 PM, Cassie said:

You're looking for 'masking'

 

https://www.google.com/search?q=svg+masking+site%3Agreensock.com&oq=svg+masking+site%3Agreensock.com&aqs=chrome..69i57.5040j0j7&sourceid=chrome&ie=UTF-8

 

 

Good luck, pop back if you have a minimal demo and need specific help

Hello, thank you for trying to help. 
The problem is that I searched for a very long time and could not find a solution. I hoped that this effect can be obtained with the help of GSAP plugins. 
If you noticed Dear Cassie the text changes when you hover. 
I'm already desperate.   -.-

[Display Name 0 Likes (Newbie)]

[mvaneijgen 2,480 Likes (Superhero)]

Hi @Display Name posting the same question at multiple places will not get you help faster. Yes this is possible with GSAP, is it easy? NO! There are multiple things that need to be build to get this effect to work. 

 

You'll need something like this to have the shape follow the mouse 

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

And indeed the post the @Cassie linked seems like a good resource to base your version on. 

 

 

Again, this will not be an easy first project. I would recommend starting with something easy in GSAP and try getting some experience with the tools, before tackling such a major project. 

 

If you don't have time to wait and do it yourself you can always check the "Jobs & Freelance" forum for paid consulting, or contact us directly. Hope it helps and happy tweening! 

[Display Name 0 Likes (Newbie)]

20 minutes ago, mvaneijgen said:

Hi @Display Name posting the same question at multiple places will not get you help faster. Yes this is possible with GSAP, is it easy? NO! There are multiple things that need to be build to get this effect to work. 

 

You'll need something like this to have the shape follow the mouse 

 

 

 

 

And indeed the post the @Cassie linked seems like a good resource to base your version on. 

 

 

Again, this will not be an easy first project. I would recommend starting with something easy in GSAP and try getting some experience with the tools, before tackling such a major project. 

 

If you don't have time to wait and do it yourself you can always check the "Jobs & Freelance" forum for paid consulting, or contact us directly. Hope it helps and happy tweening! 

Thank you very much dear mvaneijgen

[Cassie 5,650 Likes (Superhero)]

There's a demo in the thread I linked to that does exactly what you're after

See the Pen 946d5ebb14c5f5790369ce9ef0c84b39 by osublake (@osublake) on CodePen