Cursor spotlight that removes fill color and outlines certain part of text on hover

[TomasKrida]

Hello, I've seen this effect on few websites -> cursor has a transparent radius around itself, that when it hovers over a text, the part of text that is "inside" the radius loses it's fill color and only outline remains. I am a somewhat of a beginner, and I am very curious how this works because I'd love to implement it myself. If there is someone that could atleast point me in right direction, to help me figure this out I'd be very thankful.
I've also found codepen that is kinda similiar but the principle is a bit different, to my understanding it can only be used on a flat color background, but on the websites that are linked below, this effect is used with picture/photos as background.



Here are some websites that are utilizing this effect:
https://maxilla.jp/
https://www.alexthery.com/

See the Pen JjbxJqy by jamestodd (@jamestodd) on CodePen

[mvaneijgen]

Hi @TomasKrida welcome to the forum!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide "how do I recreate this cool effect I saw on another site?" tutorials. 

 

That said a user on the forum has create a really cool demo. Check @alig01 their work, who really poured in lines of code, debugging and probably some caffeine to get this to work. Hope it helps and happy tweening! 

 

See the Pen WNLGogV by alig01 (@alig01) on CodePen