I recently developed a function that enables a DOM element to follow the mouse cursor. You can check out the code here.
Currently, I am looking for suggestions on how to add a nice animation to this feature. Ideally, I want to incorporate a slight delay with smooth easing transitions. I attempted to use transition: all 0.1s ease; but it didn't provide the level of smoothness I desire. I've heard about something called cubic, but I'm unsure if that's what I need.
I believe there should be a function that eases the mouse X and Y coordinates with a gentle delay for added smoothness.
The part of the code responsible for handling mouse movement is:
function mouseMove(event) {
var target = $(this);
var dot = target.find('.pointer');
var height = dot.height();
var width = dot.width();
var offset = target.offset();
var w = target.width();
var h = target.height();
var top = offset.top;
var left = offset.left;
var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
var mY = (event.clientY - top) - height / 2;
$(dot).css('-webkit-transform', 'translate3d(' + mX + 'px , ' + mY + 'px, 0) scale(1, 1)');
};
Pointer CSS:
.pointer {
position: absolute;
z-index: 1;
width: 25%;
position: relative;
border-radius: 50%;
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
transform: translateZ(0) scale(0);
-webkit-transform: translateZ(0) scale(0);
}
.pointer:before {
content: "";
display: block;
padding-top: 100%;
}
I would greatly appreciate any advice, resources, or snippets of code that could help enhance this functionality.
Additionally, I am looking to smoothly animate the scale property of the pointer class. Ideally, I want the pointer to scale up to 1 when the mouse enters the thumbnail area and scale back down to zero when it exits.