Jump to content
Search Community

How to create this mouse hover animation?

Display Name test
Moderator Tag

Go to solution Solved by Display Name,

Recommended Posts

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!
 

 

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

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.   -.-

Link to comment
Share on other sites

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! 

  • Like 3
Link to comment
Share on other sites

  • Solution
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
Link to comment
Share on other sites

  • 4 months later...

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!

Link to comment
Share on other sites

  • 4 months later...
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

Link to comment
Share on other sites

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! 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
√ó
√ó
  • Create New...