Diego Ramírez Posted September 17 Share Posted September 17 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 More sharing options...
mvaneijgen Posted September 17 Share Posted September 17 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 More sharing options...
Diego Ramírez Posted September 17 Author Share Posted September 17 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 More sharing options...
Rodrigo Posted September 17 Share Posted September 17 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! Link to comment Share on other sites More sharing options...
Diego Ramírez Posted September 18 Author Share Posted September 18 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! 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 18 Share Posted September 18 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 More sharing options...
Diego Ramírez Posted September 18 Author Share Posted September 18 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 More sharing options...
Rodrigo Posted September 18 Share Posted September 18 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now