symdesign
1/29/2016 - 3:57 PM

Easing functions

var easing = 0.1,
    target = 20,
    x = 10
    
x += (target - x) * easing;

var duration = 2000,
    delay = 6000,
    start = new Date(),
    progress = 0

var current = 0, 
    target = 5

function animate() {
  var timePassed = new Date() - start
      timePassed -= delay
      timePassed = timePassed < 0 ? 0 : timePassed
      
  progress = timePassed / duration
  progress = progress > 1 ? 1 : progress

  delta = quad( progress )
  current = target * delta
  
  animation = requestAnimationFrame( animate )
}
function cancel() {
    cancelAnimationFrame( animation )
}


function linear( progress ) {
    return progress
}
function quad( progress ) {
    return Math.pow(progress, 2)
}
function circ(progress) {
    return 1 - Math.sin(Math.acos(progress))
}
function back(progress, x) {
    return Math.pow(progress, 2) * ((x + 1) * progress - x)
}
function bounce(progress) {
    for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
        if (progress >= (7 - 4 * a) / 11) {
        return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
        }
    }
}
function makeEaseOut(delta) {  
    return function(progress) {
        return 1 - delta(1 - progress)
    }
}