nonlogos Posted December 3, 2021 Share Posted December 3, 2021 Hi, I am trying to achieve the cursor animation effect on this site[ 14Islands ]: When the cursor is moving around the white background (not within the boundary of any image/video/link), the circle cursor seems to be squished a bit (scaleY?) based on the speed you move your cursor. I have looked through all GSAP docs and I know how to do the circle following mouse move (see the codepen link) but I am lost as to how to get that slight squishing effect going. Would really appreciate it if anyone can point me in the right direction. Thanks. See the Pen by s (@s) on CodePen Link to comment Share on other sites More sharing options...
iDad5 Posted December 4, 2021 Share Posted December 4, 2021 I haven't looked at the code of your example, but to me it seems, that there is just some animation going on for the squishy background, and hen one moves the mouse a little faster it's lagging somewhat which feels like it's deliberate, but I guess it's not... Link to comment Share on other sites More sharing options...
GreenSock Posted December 4, 2021 Share Posted December 4, 2021 I don't have time to build it all for you, but you can alter the scaleX (or scaleY) and the rotation to get that effect. You just have to figure out the angle/direction. This thread might be helpful: 1 Link to comment Share on other sites More sharing options...
Solution akapowl Posted December 4, 2021 Solution Share Posted December 4, 2021 Welcome to the forums @nonlogos Actually, a while after the thread @GreenSock linked to, someone asked about the cursor on that exact side, and the OP of the linked thread, expanded the solution from that thread to match the cursor of the linked website a bit more. See this thread, too 1 1 Link to comment Share on other sites More sharing options...
nonlogos Posted December 4, 2021 Author Share Posted December 4, 2021 WoW A BIG thank you everyone for all your timely responses. I didn't expect to get such precise answer so quickly! This community is amazing! The solutions look exactly what I was looking for. Will study them now. Thanks again!! 2 1 Link to comment Share on other sites More sharing options...
blizve0 Posted December 6, 2021 Share Posted December 6, 2021 The effect was infact really easy to do, I just got the mouse Acceleration and Multiplied it by Circle Width (CircleWidth * MouseAcceleration) thus changing the width to Expanded when Moving Mouse, and the Rotation was achieved using Math.tan() Function to get Mouse Movemenet Direction. Feel free to Experiment with the Setting on this codepen to get desired results See the Pen vYJGPaa by blitzve0 (@blitzve0) on CodePen 7 Link to comment Share on other sites More sharing options...
nonlogos Posted December 7, 2021 Author Share Posted December 7, 2021 Hi guys, I know I already marked this thread as resolved, but I have a follow up question and would love it if you can point me to the right directions. I wanted to combine this cursor effect to the demo here where once the cursor (mouse) enters a link area it sticks there and triggers the organic blob effect until user moves the mouse (onmouseleave) out of the link. Right now I am just trying to remove the tick listener on mouseEnter and add a gsap.to to stick the svg element to the link. But I notice that when I move the cursor to within the nav link it triggered mouseEnter and then immediately mouseLeave immediately even if the cursor is still within the nav area See my attempt here. If I remove the sticky animation as below the mouseEnter and MouseLeave firing goes back to normal. I am confused as to why that is. Cursor.component.tsx // the sticky effect useEffect(() => { if (stickyPos?.isSticky) { const { x, y, width, height } = stickyPos; gsap.to(el.current, { x: x + width / 2, y: y + height / 2, width: width }); } }, [stickyPos?.isSticky]); Really appreciated if someone can tell me what I am doing wrong... Thank you so much The example I am trying to replicate My codesandbox code so far Link to comment Share on other sites More sharing options...
GreenSock Posted December 8, 2021 Share Posted December 8, 2021 I don't have time to dig into all the logic there (usually we try to keep these forums focused on GSAP-specific questions), but it sounds like maybe you just need to set pointer-events: none on your circle/cursor because that element is sliding underneath where your pointer is, causing the mouseleave to fire. Does that help? 2 Link to comment Share on other sites More sharing options...
nonlogos Posted December 8, 2021 Author Share Posted December 8, 2021 @GreenSock Thank you so much for your reply. The pointer-events: none was it! really appreciate it. Thanks again! Link to comment Share on other sites More sharing options...
Ehsan.shv Posted April 28, 2022 Share Posted April 28, 2022 So I packaged this cursor to npm. You can use it in your React apps. Repo 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 29, 2022 Share Posted April 29, 2022 @Ehsan.shv you might want to look into the new gsap.quickTo() method to improve performance even more. 1 Link to comment Share on other sites More sharing options...
blizve0 Posted April 30, 2022 Share Posted April 30, 2022 @Ehsan.svh Hi Thanks I tried to do that too but failed, check out the complete implementation of the cursor here and tell me if you're interested in packaging this to npm. https://haspr-agency-portfolio.vercel.app Just message me on frustasio@gmail.com or on gsap forum Link to comment Share on other sites More sharing options...
Ehsan.shv Posted April 30, 2022 Share Posted April 30, 2022 16 hours ago, GreenSock said: @Ehsan.shv you might want to look into the new gsap.quickTo() method to improve performance even more. Yes, I did and published version 0.5.0. If there is an issue please tell me. Thanks for your help. Link to comment Share on other sites More sharing options...
Ehsan.shv Posted April 30, 2022 Share Posted April 30, 2022 6 hours ago, blizve0 said: @Ehsan.svh Hi Thanks I tried to do that too but failed, check out the complete implementation of the cursor here and tell me if you're interested in packaging this to npm. https://haspr-agency-portfolio.vercel.app Just message me on frustasio@gmail.com or on gsap forum I think this is inspired by Cuberto. If you mean magnetic and sticky cursor, yes I'm working on it. Because in a real app you may have some routes it makes it a bit complex. I'm trying to fix it but it may take time. When I fix it, will send you an Email or quote here. If there is an issue please tell me or open an issue in the repo. 1 Link to comment Share on other sites More sharing options...
Ehsan.shv Posted May 5, 2022 Share Posted May 5, 2022 On 4/30/2022 at 9:44 AM, blizve0 said: @Ehsan.svh Hi Thanks I tried to do that too but failed, check out the complete implementation of the cursor here and tell me if you're interested in packaging this to npm. https://haspr-agency-portfolio.vercel.app Just message me on frustasio@gmail.com or on gsap forum Hi, It's done. please check the repo. 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