SVG Cursor Content Mask

[Elicrespo]

Hey guys,

 

Why isn't the big orange ball's center aligned to the cursor on hover?

 

I have 2 sections where i use the cursor to unmask hidden content. I'm aware I'm animating it on mouse enter on hover_container, to which the hidden text is positioned absolute. But it switches to normal cursor when it leaves the div. 

 

I would like the cursor to maintain the small orange ball state across the entire page. How can I do that if I'm using svg to mask and unmask content in different sections of the page?

 

Do I just need to create a cursor of the same 20px x 20px and have it z-index higher than everything and toggle it on and off??

 

Thank you 

See the Pen LYMZLdv?editors=1010 by elicrespo (@elicrespo) on CodePen

[mvaneijgen]

Hi @Elicrespo I see no orange ball at all! Am I missing something?

 

I do know that if you want things to animate rapidly (on mouse move events for instance) it is better to use .quickSetter() https://greensock.com/docs/v3/GSAP/gsap.quickSetter() that function is much more optimised for those type of events. 

[Trapti]

Hi, 

one approach could be:

Create one SVG which is coving the entire page. This SVG will contain the ball (small size) and the text which needs to be shown on hover. 

The page will be in sections showing different texts. 

 

1. The SVG is covering the entire page hence the ball (small size) which you can attach to the cursor will be shown in the entire page. 
2. As soon as the cursor reaches the first section which you can determine using the position coordinate. Increase the ball size and show the respective text. Same for the other sections. 

 

 

[alig01]

Hey,

 

I created a similar effect for a project a few days ago. There are a few ways to achieve this effect and since you are already using SVGs, you should check if Trapti suggestion is more suitable for your use case.

 

A other option would be to use a mask-image there is already a tutorial for that on tympanus (they also use gsap).

Here is on of the codepens from the tutorial:

See the Pen 654a774b064362000c1e94738e8be536?editors=0110 by michellebarker (@michellebarker) on CodePen

 

The only thing left is to control the size of the mask. For that you could use mask-size: var(--size),contain; and control the --size using gsap.

 

It would be great to see the final result. If I find time I can also share my result later in case it wont be similar .

Hope this helps and good luck with your project.

 

[Rodrigo]

Hi

 

Just to complement @alig01 great example, you could use GSAP QuickTo for this:

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

Hopefully this helps

Happy Tweening!

[Elicrespo]

15 hours ago, mvaneijgen said:

Hi @Elicrespo I see no orange ball at all! Am I missing something?

 

I do know that if you want things to animate rapidly (on mouse move events for instance) it is better to use .quickSetter() https://greensock.com/docs/v3/GSAP/gsap.quickSetter() that function is much more optimised for those type of events. 

Very interesting @mvaneijgen I'm learning more about GSAP. Thank you.
 

[Elicrespo]

14 hours ago, Trapti said:

Hi, 

one approach could be:

Create one SVG which is coving the entire page. This SVG will contain the ball (small size) and the text which needs to be shown on hover. 

The page will be in sections showing different texts. 

 

1. The SVG is covering the entire page hence the ball (small size) which you can attach to the cursor will be shown in the entire page. 
2. As soon as the cursor reaches the first section which you can determine using the position coordinate. Increase the ball size and show the respective text. Same for the other sections. 

 

 

@Trapti Yeah I was wondering whether it was healthy to wrap the whole thing inside an SVG. I'm gonna try it out. Thank you 

[Elicrespo]

9 hours ago, Rodrigo said:

Hi

 

Just to complement @alig01 great example, you could use GSAP QuickTo for this:

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

Hopefully this helps

Happy Tweening!

I tried the quickTo() which fixed my cursor position and the small ball cursor shape displaying within the entire section. Thank you @Rodrigo

[Elicrespo]

12 hours ago, alig01 said:

Hey,

 

I created a similar effect for a project a few days ago. There are a few ways to achieve this effect and since you are already using SVGs, you should check if Trapti suggestion is more suitable for your use case.

 

A other option would be to use a mask-image there is already a tutorial for that on tympanus (they also use gsap).

Here is on of the codepens from the tutorial:

 

 

 

The only thing left is to control the size of the mask. For that you could use mask-size: var(--size),contain; and control the --size using gsap.

 

It would be great to see the final result. If I find time I can also share my result later in case it wont be similar .

Hope this helps and good luck with your project.

 

Good share @alig01. Good examples in the article. 

 

Yes, @Trapti s solution is better suited for what i m trying to create. I'll try and share the end result when I'm done. And yes, I would love to see your project as well. Thank you

[alig01]

Hey,

 

as promised here is my approach (only thing left is some match media stuff, to catch mobile users and adjust the sizing).

See the Pen WNLGogV?editors=0010 by alig01 (@alig01) on CodePen

 

Unfortunately, I had to rewrite it a bit because I couldn't find a circle image for my mask-image and uploading assets is a codepen pro feature.... 
In the end I could have used a clip path, but I wanted to stick with what I already had, would probably have been the same result.

 

It would be interesting to know which approach is more efficient (probably someone knows it and could enlighten us), but I will leave it for another day until I notice some issues.

 

@Rodrigo nice catch with the quickTo(), didn't even notice they weren't using it .

 

Hope this helps someone in the future and as always feedback is welcome.

[Cassie]

Nice one @alig01 💚