Custom Foggy Cursor

[Dennyno 42 Likes (Newbie)]

Hi,

to replicate this custom cursor?
Doable with gsap?
 

See the Pen abLmBxJ by DedaloD (@DedaloD) on CodePen

[akapowl 5,482 Likes (Superhero)]

Hello @Dennyno

 

On 11/3/2021 at 12:26 PM, akapowl said:

That smoke effect in the background on mousemove is likely created with WebGL and probably not that easy to realize.

While GSAP can also animate things in a WebGL context, you won't be able to create something like that with GSAP alone.

 

For a bit more info, check this recent thread.

 

 

[Dennyno 42 Likes (Newbie)]

You're right.
I've found the source, gonna play with it: 

See the Pen PoJGKOb by DedaloD (@DedaloD) on CodePen

Thanks

[Dennyno 42 Likes (Newbie)]

@OSUblake I found one of your demo here: 

See the Pen wvBjdWP by GreenSock (@GreenSock) on CodePen

I prefer your custom cursor trailer as It's just an svg, instead of a whole canvas which I need to put on a fixed layer behind the dom tree (and doesnt work every where).

Do you think is possibile to tweak it, to make it more looking like this one? 

See the Pen MWEpbZz by DedaloD (@DedaloD) on CodePen

[OSUblake 18,533 Likes (Superhero)]

The masking effect, where it reveals the text "See the magic", is possible, but that glow effect would be very hard to reproduce with SVG. Even if you could reproduce that glow effect with SVG, I highly doubt the browser would be able to render it at a reasonable framerate.

 

[Dennyno 42 Likes (Newbie)]

5 hours ago, OSUblake said:

The masking effect, where it reveals the text "See the magic", is possible, but that glow effect would be very hard to reproduce with SVG. Even if you could reproduce that glow effect with SVG, I highly doubt the browser would be able to render it at a reasonable framerate.

 

I see, ok then.. thank you!

So sad I cant use that canvas on my code, having many divs in different positions and z-indexes... so trying to add that  as as the last element in the dom, with position fixed, gives problem: z-index:0 is higher then the body and it's stuff, and z-index -1 puts the canvas itself behind, so not visibile.

I give it up this time