<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
.el{position:fixed;left:-50px;top:-50px;width:100px;height:100px;border-radius:50%;background:blue;}
.el:nth-of-type(2){background:red;}
.el:nth-of-type(3){background:green;}
var _el = document.getElementsByClassName("el");
var _l = _el.length;
for(var i=0;i<_l;i++) new FollowMouse(i, _el[i]);
function FollowMouse(_id, _me){
var _d, _speed = .1, _mx = 0, _my = 0, _twx = 0, _twy = 0;
var _movedX = 0, _movedY = 0, _difX = 0, _difY = 0, _xBounce = 0, _yBounce = 0, _addX = 0, _addY = 0, _oldx = 0, _oldy = 0;
var _a = .1;//speed
var _elasticAmount = .3;
function mmove(e){
_oldx = _mx, _oldy = _my;
_mx = e.clientX, _my = e.clientY;
_movedX = _mx - _oldx;
_movedY = _my - _oldy;
}
function engine(){
_d = gsap.ticker.deltaRatio(60);
if(_id == 0){
//normal lerp
//_twx += (_mx-_twx)*_speed*_d;
//_twy += (_my-_twy)*_speed*_d;
_twx = lerp(_twx,_mx,_speed*_d);
_twy = lerp(_twy,_my,_speed*_d);
}
else if(_id == 1){
//damp
_twx = damp(_twx, _mx, _speed, _d);
_twy = damp(_twy, _my, _speed, _d);
}
else if(_id == 2){
//damp
_twx = damp(_twx, _mx, _speed, _d);
_twy = damp(_twy, _my, _speed, _d);
//bounce x
_difX = _movedX - _addX;
_xBounce += _difX * _elasticAmount;
_addX += _xBounce * _a + _difX * _a;
_twx += _addX*_d;
//bounce y
_difY = _movedY - _addY;
_yBounce += _difY * _elasticAmount;
_addY += _yBounce * _a + _difY * _a;
_twy += _addY*_d;
}
gsap.set(_me, {x:_twx, y:_twy});
}
window.addEventListener("mousemove", mmove);
gsap.ticker.add(engine);
}
//normal lerp
function lerp(x,y,t){
return (1-t)*x+t*y;
}
//a little smoother lerp (easing closer to quad)
function damp(x,y,l,dt){
return lerp(x,y,1-Math.exp(-l*dt));
}
This Pen doesn't use any external CSS resources.