Kevin Powell - Community•9mo ago

Cursor Animation

Hello, I am trying to make the cursor on this website https://www.cynthiaugwu.com/ I am here so far. Its not exactly behaving as required. https://jsfiddle.net/2xpne574/2/ It pinches in wrong axis when I move the mouse up or left. Works fine for bottom and right directions. Still figuring out why. I want to pinch the cursor diagonally too when I move the mouse diagonally, as in the original website. I am not sure how to implement it tho.

Cynthia Ugwu | Product Designer

A product designer with a passion for creating products that not only look good but also solve real problems.I'm the designer you want on your team if you want to make people say 'I need that in my life!'.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

8 Replies

MarkBoots•9mo ago

If you calculate the angle from the previous mouse position to the current, you can rotate the point accordingly. that way you only need a single scale for all directions I also looked at the source of that site, they are using this library. Maybe a bit easier https://github.com/Cuberto/mouse-follower

GitHub

GitHub - Cuberto/mouse-follower: A powerful javascript library to c...

A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. - Cuberto/mouse-follower

sAnKeTOP•9mo ago

I spent enough time to know that I am not finding this by myself. Would you mind at least telling me why my cursor is not pinching when I am moving the cursor, upwards or left of the screen? It's working fine when cursor is going downwards or right.

MarkBoots•9mo ago

its because on line 18/19 the dets.clientX - xPrevious and dets.clientY - yPrevious turn out negative when going up and left. that negative value is outside the clamp values so nothing happens you can fix it by taking the absolute value Math.abs(dets.clientY - yPrevious) so line 18 and 19 should be

xScale = gsap.utils.clamp(0.7, 1.3, Math.abs(dets.clientX - xPrevious));
yScale = gsap.utils.clamp(0.7, 1.3, Math.abs(dets.clientY - yPrevious));

xScale = gsap.utils.clamp(0.7, 1.3, Math.abs(dets.clientX - xPrevious));
yScale = gsap.utils.clamp(0.7, 1.3, Math.abs(dets.clientY - yPrevious));

sAnKeTOP•9mo ago

That was very stupid of me 🤦‍♂️ Thank you very much!

MarkBoots•9mo ago

i played with it a bit more, here i used the angle and distance between the points, rotated and scaled accordingly https://jsfiddle.net/esdynq6p/1/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

sAnKeTOP•9mo ago

This is brilliant. Thank you very much. I just had one last question regarding this

function circleMouseFollower(angle, scale) {
  window.addEventListener("mousemove", function (dets) {
    document.querySelector("#minicircle").style.transform = `translate(${
      dets.clientX
    }px,${dets.clientY}px) rotate(${-angle}deg) scaleY(${scale})`;
  });
}

function circleMouseFollower(angle, scale) {
  window.addEventListener("mousemove", function (dets) {
    document.querySelector("#minicircle").style.transform = `translate(${
      dets.clientX
    }px,${dets.clientY}px) rotate(${-angle}deg) scaleY(${scale})`;
  });
}

In this function, if we are scaling only in Y axis [ scaleY(${scale}) ], how is the cursor scaling in X-axis too?

MarkBoots•9mo ago

it is rotating first, then it scales

sAnKeTOP•9mo ago

Got it:thumbup:

Gaming

Programming

Cursor Animation