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