<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));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/gsap@3/dist/gsap.min.js
  2. https://unpkg.com/gsap@3/dist/EasePack.min.js