import { createAnimatable, utils, stagger } from 'animejs';
const clock1 = createAnimatable('.clock-1', {
rotate: { unit: 'rad' },
ease: 'linear',
});
const clock2 = createAnimatable('.clock-2', {
rotate: { unit: 'rad' },
ease: 'outElastic',
});
const rotateClock = (animatable) => {
const PI = Math.PI;
let angle = PI / 2;
let lastAngle = 0;
return e => {
const [ $clock ] = animatable.targets;
const { width, height, left, top } = $clock.getBoundingClientRect();
const x = e.clientX - left - width / 2;
const y = e.clientY - top - height / 2;
const currentAngle = Math.atan2(y, x);
const diff = currentAngle - lastAngle;
angle += diff > PI ? diff - 2 * PI : diff < -PI ? diff + 2 * PI : diff;
lastAngle = currentAngle;
animatable.rotate(angle);
}
}
const rotateClock1 = rotateClock(clock1);
const rotateClock2 = rotateClock(clock2);
const onMouseMove = e => {
rotateClock1(e);
rotateClock2(e);
}
window.addEventListener('mousemove', onMouseMove);
<div class="large centered row">
<div class="col">
<div class="clock clock-1"></div>
<div class="label">linear</div>
</div>
<div class="col">
<div class="clock clock-2"></div>
<div class="label">outElastic</div>
</div>
</div>