JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="canvas"></div>

CSS

body {
    margin: 0;
    overflow: hidden;
}

#canvas {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: brown;
    position: relative;
}

#canvas div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    transition: 1s;
    border-radius: 50%;
    background: brown;
}
div#test {
    width: 200%;
    height: 200px;
    border: 1px solid black;
}
div#test div.box {
    width: 9%;
    height: 100%;
    border: 1px solid black;
    display: inline-block;
    margin: 0 0.3%;
}

JavaScript

var elem = document.querySelector('#canvas'),
	style = [],

    target = {
        x: 0,
        y: 0
    },

    position = {
        x: 0,
        y: 0
    },

    ease = 0.05;



document.addEventListener('mousemove', function(e) {
    target.x = e.clientX,
    target.y = e.clientY
})

function update() {
    elem.style.transform = 'translate(' + (position.x - 10) + 'px,' + (position.y - 10) + 'px)';
    position.x = position.x + (target.x - position.x) * ease;
    position.y = position.y + (target.y - position.y) * ease;

    requestAnimationFrame(update)

}
update();