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
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
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
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.
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
That was very stupid of me 🤦♂️
Thank you very much!
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.
This is brilliant. Thank you very much.
I just had one last question regarding this
In this function, if we are scaling only in Y axis [ scaleY(${scale}) ], how is the cursor scaling in X-axis too?
it is rotating first, then it scales
Got it:thumbup: