jQuery: Follow cursor with delay

Question

I want a div to follow the cursor-movement with a short delay like this: http://vanderlanth.io/

As you can see, the 'follower' has a short delay in the animation.

I've rebuild some function which is not working very well:

$(document).ready(function () {

    $("body").mousemove(function (e) {
        handleMouseMove(e);
    });

    function handleMouseMove(event) {

        var x = event.pageX;
        var y = event.pageY;

        $(".cursor-follower").animate({
            left: (x - 16),
            top: (y - 16)
        }, 16);

        $(".cursor").css({
            left: (x - 4),
            top: (y - 4)
        });
    }
});

It's quite lagging and the animation is not very smooth and ease. Do you have another solution?

Answer 1

You can achieve this effect with CSS transitions. In JavaScript you only have to update the position of the div.

$(document).on('mousemove', (event) => {
  $('.follower').css({
    left: event.clientX,
    top: event.clientY,
  });
});

.follower {
  width: 20px;
  height: 20px;
  background-color: grey;
  border-radius: 10px;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  position: fixed;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower"></div>