[Circle animation that follows cursor mouse move event]

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

[Circle animation that follows cursor mouse move event]

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

[Circle animation that follows cursor mouse move event]

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

[Circle animation that follows cursor mouse move event]

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