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
MarkBoots
MarkBoots8mo 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
sAnKeT
sAnKeT8mo 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
MarkBoots8mo 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));
sAnKeT
sAnKeT8mo ago
That was very stupid of me 🤦‍♂️ Thank you very much!
MarkBoots
MarkBoots8mo 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.
sAnKeT
sAnKeT8mo 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
MarkBoots8mo ago
it is rotating first, then it scales
sAnKeT
sAnKeT8mo ago
Got it:thumbup:
Want results from more Discord servers?
Add your server