GSAP Cursor - Invert Colours when SVG is in Bounds

[ainsley_clark]

Hi there,

 

I'm wondering if it's possible to have a cursor that follows the mouse, and when the user hovers over any element, the inside of the circle would turn black, and the text would turn white (or just invert the colours).

Is there a way to make a mask? Im presuming it would be very un-performant to have an event listener on all elements. 

 

Codepen attached, thanks for your help in advance. 

 

See the Pen VwYgXZB by ainsleyclark (@ainsleyclark) on CodePen

[benoit]

I try something with blend-mode, z-index…

See the Pen abzXKpZ by benoitwimart (@benoitwimart) on CodePen

[ZachSaucier]

Hey Ainsley,

 

Blend modes and masks are good for this sort of effect. How to set it up depends exactly on what you're trying to accomplish. 

 

2 hours ago, ainsley_clark said:

Im presuming it would be very un-performant to have an event listener on all elements.

That isn't necessarily true. Event listeners are pretty performant in themselves. The main issues come from trying to do non-performant things inside of the listeners  

[ainsley_clark]

Hi @ZachSaucier @benoit

 

Many thanks for your replies.

 

When the mouse is hovered over the element (which could be anything), the cursor should enlarge, turn black & turn the text white.

I can't seem to get the effect working with the blend mode (colours) but the effect is very close.

 

Thanks again.

[ZachSaucier]

13 minutes ago, ainsley_clark said:

When the mouse is hovered over the element (which could be anything), the cursor should enlarge, turn black & turn the text white.

My first thought is to double layer everything that you want this effect to apply to. Then use a mask to show the other layer. You could then pair that with an animation to do the color and size change. 

 

This pen shows the basic setup of how to do so (without animation on hover):

See the Pen ByxQjL?editors=0010 by noeldelgado (@noeldelgado) on CodePen