Jump to content
Search Community

Organic / Jelly / Elastic - Custom cursor

Diego Ramírez test
Moderator Tag

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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!

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.
×
×
  • Create New...