Mouse Cursor Effect

[rala 0 Likes (Newbie)]

Hi, this website using GSAP https://advanced.team/

can I know how they make mouse effect with GSAP  and how the color of shape change when mouse move ?

I see this example  but my question is about the shape 

Thanks in advance

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

[Cassie 5,658 Likes (Superhero)]

Hi there, welcome to the GSAP forums!
 

This is a very complex effect made using shaders - https://tympanus.net/codrops/tag/shader/

 

As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites.

We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal.

[akapowl 5,494 Likes (Superhero)]

 

That effect was asked about a couple of times in the past few weeks - I wonder why it is so popular all of a sudden 🤔

 

 

[rala 0 Likes (Newbie)]

Because it make the website visitors stay more time in your website 😁

[vlbn 13 Likes (Newbie)]

@rala i just coded a VUE component kinda doing what you want.. sorta say. it's funny that i decided to check this forum the same day i published my code on github hehe.. what are the odds? xD

https://github.com/vlbn/fancycursor

Edited January 1, 2022 by vlbn
updated code + thumb

[vlbn 13 Likes (Newbie)]

On 12/30/2021 at 12:58 PM, akapowl said:

 

That effect was asked about a couple of times in the past few weeks - I wonder why it is so popular all of a sudden 🤔

 

 

i made the homework.. you guys may want to check this .. @rala @akapowl @OSUblake @developer53

Edited January 1, 2022 by vlbn
forgot to mention the original poster

[Dennyno 42 Likes (Newbie)]

If still interested, I got it working here 

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

And on related post of my account, you may seen all the effects you can achieve.

You just need to play with transparency, curls, and strengh .. 

[rala 0 Likes (Newbie)]

@Dennyno can you explain how do you think   in order to achieve the result ? because I don't like to only copy and paste code from others.

I also try tom make the canvas background transparent but it didn't work 

[Dennyno 42 Likes (Newbie)]

It's webgl, so the canvas bg is controlled by the script itself, even if you try with CSS.

Basically the canvas is full width/height and it's behind all the other stuff on the page with a lower z-index. (Or easier: put an higher one to other elements)

Here you can find the whole working script with its vars https://paveldogreat.github.io/WebGL-Fluid-Simulation/
the transparency it's under the tab "Capture". 

Hope it helps.

//PS also on my Codepen I made another example with transparency

[akapowl 5,494 Likes (Superhero)]

Since the code provided by the author is under the MIT License, make sure to include the copyright notice when you use it, @Dennyno

[vlbn 13 Likes (Newbie)]

2 hours ago, Dennyno said:

If still interested, I got it working here 

 

And on related post of my account, you may seen all the effects you can achieve.

You just need to play with transparency, curls, and strengh .. 

 

 

this is awesome, thanks for sharing.  did you check my repo?

[Dennyno 42 Likes (Newbie)]

15 minutes ago, vlbn said:

this is awesome, thanks for sharing.  did you check my repo?

Yes, thanks for sharing too!

It's me or the cursor and the "waves" are on different position, and they also play only on mousedown instead of mousemove?

[Dennyno 42 Likes (Newbie)]

39 minutes ago, akapowl said:

Since the code provided by the author is under the MIT License, make sure to include the copyright notice when you use it, @Dennyno

Thanks on the main demo I added credits, but seems that this project has some debate behind it, as it seems that Pavel has been fired (or has leave) the team, who now is keeping, without really credits, it going on via APPS only.
(So online it's a dead project  - I guess).

But thanks for the right point, gonna add anyway to avoid any problem if future

[rala 0 Likes (Newbie)]

@Dennyno I think your code is stop working 🙄

[vlbn 13 Likes (Newbie)]

14 minutes ago, Dennyno said:

Yes, thanks for sharing too!

It's me or the cursor and the "waves" are on different position, and they also play only on mousedown instead of mousemove?

both!

[Dennyno 42 Likes (Newbie)]

42 minutes ago, rala said:

@Dennyno I think your code is stop working 🙄

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

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

Both are still working

[vlbn 13 Likes (Newbie)]

@Dennyno i still cant figure out how to change the canvas color to white.. 

canvas.fillStyle = "#ffffff";

does not work...  thanks!

[OSUblake 18,538 Likes (Superhero)]

8 hours ago, vlbn said:

@Dennyno i still cant figure out how to change the canvas color to white.. 

canvas.fillStyle = "#ffffff";

does not work...  thanks!

 

That works for 2d canvas, but this is WebGL, which can usually be done with clearColor, however, that doesn't seem to work. That means the background is probably being set with gl_fragColor in one of the shaders, but I have no idea which one. It would probably be best to ask to the original author of the code.

 

[Dennyno 42 Likes (Newbie)]

2 hours ago, OSUblake said:

 

That works for 2d canvas, but this is WebGL, which can usually be done with clearColor, however, that doesn't seem to work. That means the background is probably being set with gl_fragColor in one of the shaders, but I have no idea which one. It would probably be best to ask to the original author of the code.

 

Here's the full updated code 

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

 ( I did changed bg to a grey one)

On the other demo it has been missing some vars.

TRANSPARENCY: True is right the key

And I also deleted the DrawCheckboard's function that puts squares on canvas' bg while being transparent (it fakes a transparent pattern, like Photoshop empty doc), as you ca see on Pavel's main demo.

Also please  note that I did touched where it says "mousedown" to true, otherwise it works only when pressing down.
--------------------------------------
BTW this is out from the scope of this GSAP Forum, sorry @OSUblake for replying  but this could help the community

[vlbn 13 Likes (Newbie)]

2 hours ago, Dennyno said:

BTW this is out from the scope of this GSAP Forum, sorry @OSUblake for replying  but this could help the community

@Dennyno thank you very much for your valuable help. my code uses GSAP for the normal cursor pointers animation.. this smoke thing was just to add some fanciness.

[eli-ott 3 Likes (Newbie)]

Hello, sorry for bringing back this old topic, but I copied the CodePen (with the black background not the gray) and make the canvas transparent. But now I don't know how to change the effect's color. Because with a white background, it's invisible. 

If anyone could help, that'll be lovely. 

[iDad5 215 Likes (Specialist)]

In the config section at the top set: BACK_COLOR: { r: 255, g: 255, b: 255 },

 

and set the background color in css to white....

[eli-ott 3 Likes (Newbie)]

I had already changed my canvas to transparent so that when I put other elements behind it does work properly. And I try to change the config to BACK_COLOR: {r: 255, g: 255, b: 255}, but that didn't change anything. The trail that the cursor create is still white (on a white background).

The colors on the gray background CodePen would be perfect, but the two CodePen are too different to compare for me.

[iDad5 215 Likes (Specialist)]

Well, it (mostly) worked for me - but I found that sometimes it crashes....

 

See the Pen ExEQpqY by mdrei (@mdrei) on CodePen

[eli-ott 3 Likes (Newbie)]

Thanks a bunch man, I didn't got the same codepen as you did but know I modified it a bit and that works perfectly. 

Thanks!!