How to create this mouse hover animation?

[Display Name]

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]

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]

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

[Display Name]

[Cassie]

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]

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]

[mvaneijgen]

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]

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]

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

[Bolargent]

@Cassie Nice one but there's one issue... Your last response is good but it doesn't show different layer of texts when hovered over.  The red circle is  supposed to be revealing the different layer of words.

 

I hope I am able to make some sense here.

[Rodrigo]

Hi @Bolargent,

 

The codepen example that Cassie created is doing something completely different. There is no actual masking involved. Just an element with specific dimensions, an overflow hidden and a large border-radius applied to it:

.mask {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

What Cassie is doing is moving the child element of that one based on the mouse position. That plus some other CSS magic tricks plus some simple math achieves that particular effect.

 

Study the codepen and look at the result in devtools to understand how it works.

 

Hopefully this clear things up.

Happy Tweening!

[webenaco_Dev]

On 5/26/2023 at 9:06 PM, Cassie said:

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

 

Hi, starting from this code is it possible to obtain the same effect without duplicating the text? Is there another approach that avoids duplicating textual content? Thank you

[mvaneijgen]

You can try an place a shape over everything and set its mix blend mode to something like mix-blend-mode: difference; https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode, but this has less browsers support, it can look inconsistent between browsers and is much heavier for the browser to render. 

 

So yes it is possible, but not with the same niceties.

 

What is the issue with duplicating the text? If you're worried about SEO, but copy the text when you know all the bots have inspected the page, eg only on interaction of the mouse or something similar. Hope it helps and happy tweening!