Circle animation that follows cursor mouse move event

[nonlogos]

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.

[iDad5]

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

 

 

[GreenSock]

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: 

 

[akapowl]

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

 

 

[nonlogos]

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

[blizve0]

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.

[nonlogos]

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

[GreenSock]

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? 

[nonlogos]

@GreenSock Thank you so much for your reply. The pointer-events: none was it! really appreciate it. Thanks again!  

[Ehsan.shv]

So I packaged this cursor to npm. You can use it in your React apps. Repo

[GreenSock]

@Ehsan.shv you might want to look into the new gsap.quickTo() method to improve performance even more. 

[blizve0]

@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 [email protected] or on gsap forum

[Ehsan.shv]

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.

[Ehsan.shv]

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 [email protected] 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.

[Ehsan.shv]

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 [email protected] or on gsap forum

Hi, It's done. please check the repo.