Organic / Jelly / Elastic - Custom cursor

[Diego Ramírez]

Hey there guys! I've been using GSAP for a while now, and really loving it so far!

I've found that this forum is one of the most valuable resources in the GSAP eco-system, that said. I've been looking to replicate a custom cursor I found on this website:
https://wildeburg.nl/
 

I'm struggling on how to get started and also to create the 'organic', 'elastic', 'jelly-like' effect when moving the cursor... any help would be highly appreciated! thanks!

[mvaneijgen]

Hi @Diego Ramírez welcome to the forum!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

Below the docs for quickTo() with its demo of following the mouse. You only have to figure out how to debounce a tween on mouse move that stretches your shape (you can just use scaleX for that) and then find the angle you've mouse moved in and set that as the angle. Personally I take me around 10 versions to get where I want to go, so the best thing is to get started, fork your work and post back here with minimal demo when you get stuck. Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/GSAP/gsap.quickTo()/

 

See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen.

[Diego Ramírez]

Hey @mvaneijgen! thanks so much for your reply!

 

I totally understand and I'm definitely not looking for free consultation, thanks for managing expectations though! 

It's just that I wasn't even sure on where to start with some of the effects used on the demo provided,  that said, with all the information and suggestions you provided you have helped me tons! thanks for that!

I'm also posting so more developers that may be looking for something similar get some guidance / starting point on how to achieve this.

 

I'll post back my journey for this here!

[Rodrigo]

This article should provide a good starting point:

https://css-tricks.com/gooey-effect/

 

Also this demo by @PointC:

See the Pen oqeJbo by PointC (@PointC) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Diego Ramírez]

Thanks for contributing to the post @Rodrigo!

That's indeed a nice example of a  jelly-like animation.

I have worked on a CodePen for this custom cursor I'm trying to achieve, see below:

See the Pen WNqqyQN by dieram-dev (@dieram-dev) on CodePen.

 

However, I'd like to add it a bit of a "tail" similar like the example I posted above, any ideas...?

Thank you in advance!

[mvaneijgen]

To me it just seems like the original example you shared scales the dot in one direction more or less depending on how much you move. I don't have the time to dissect all your code, but I would multiply the velocity you're getting to some number that gives the best effect. 

 

It also seems like you don't use .quickTo() or .quickSetter(), this could give you a performance boost, so make something to look in to. Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/GSAP/gsap.quickTo()/

https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/

 

See the Pen bGPPQEg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Diego Ramírez]

Thanks for the reply @mvaneijgen!

You got a good point there, I have re-factored the code to use gsap.quickSetter() for a performance boost! I have also added a show/hide feature in case the cursor needs to hover an iframe (which seems to break this custom cursor)

See the Pen WNqqyQN by dieram-dev (@dieram-dev) on CodePen.

I'll leave this thread open in case someone wants to add any relevant info to improve this...

 

[Rodrigo]

Hi,

 

Indeed this is not the simplest thing to achieve and make it look as natural as possible.

 

Maybe these demos by @OSUblake can help:

See the Pen LxVaVw by osublake (@osublake) on CodePen.

 

See the Pen ZOvdoW by osublake (@osublake) on CodePen.

 

See the Pen mEpado by osublake (@osublake) on CodePen.

 

See the Pen MrjqMJ by osublake (@osublake) on CodePen.

 

Happy Tweening!