Jump to content
GreenSock

rala

Mouse Cursor Effect

Go to solution Solved by Dennyno,

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

 

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 🤔

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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

rZa6dGc.gif

https://github.com/vlbn/fancycursor

Edited by vlbn
updated code + thumb
  • Like 1
Link to comment
Share on other sites

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 by vlbn
forgot to mention the original poster
  • Like 3
Link to comment
Share on other sites

  • Solution

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 .. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@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 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

@Dennyno I think your code is stop working 🙄

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

canvas.fillStyle = "#ffffff";

does not work...  thanks!

Link to comment
Share on other sites

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.

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

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. 

Link to comment
Share on other sites

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....

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

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

  • Like 1
Link to comment
Share on other sites

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!! 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×