# EASING FUNCTIONS

## In this example below you will see how to do a EASING FUNCTIONS with some HTML / CSS and Javascript

This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
• HTML
• JavaScript
``````<!DOCTYPE html>
<html lang="en" >

<meta charset="UTF-8">
<title>EASING FUNCTIONS</title>

<body>

<script  src="js/index.js"></script>

</body>

</html>
``````
``````
// No easing, no acceleration
var EASING = {
linear: function linear(t) {
return t;
},

// Slight acceleration from zero to full speed
easeInSine: function easeInSine(t) {
return -1 * Math.cos(t * (Math.PI / 2)) + 1;
},

// Slight deceleration at the end
easeOutSine: function easeOutSine(t) {
return Math.sin(t * (Math.PI / 2));
},

// Slight acceleration at beginning and slight deceleration at end
easeInOutSine: function easeInOutSine(t) {
return -0.5 * (Math.cos(Math.PI * t) - 1);
},

// Accelerating from zero velocity
return t * t;
},

// Decelerating to zero velocity
return t * (2 - t);
},

// Acceleration until halfway, then deceleration
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
},

// Accelerating from zero velocity
easeInCubic: function easeInCubic(t) {
return t * t * t;
},

// Decelerating to zero velocity
easeOutCubic: function easeOutCubic(t) {
var t1 = t - 1;
return t1 * t1 * t1 + 1;
},

// Acceleration until halfway, then deceleration
easeInOutCubic: function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
},

// Accelerating from zero velocity
easeInQuart: function easeInQuart(t) {
return t * t * t * t;
},

// Decelerating to zero velocity
easeOutQuart: function easeOutQuart(t) {
var t1 = t - 1;
return 1 - t1 * t1 * t1 * t1;
},

// Acceleration until halfway, then deceleration
easeInOutQuart: function easeInOutQuart(t) {
var t1 = t - 1;
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * t1 * t1 * t1 * t1;
},

// Accelerating from zero velocity
easeInQuint: function easeInQuint(t) {
return t * t * t * t * t;
},

// Decelerating to zero velocity
easeOutQuint: function easeOutQuint(t) {
var t1 = t - 1;
return 1 + t1 * t1 * t1 * t1 * t1;
},

// Acceleration until halfway, then deceleration
easeInOutQuint: function easeInOutQuint(t) {
var t1 = t - 1;
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * t1 * t1 * t1 * t1 * t1;
},

// Accelerate exponentially until finish
easeInExpo: function easeInExpo(t) {
if (t === 0) {
return 0;
}

return Math.pow(2, 10 * (t - 1));
},

// Initial exponential acceleration slowing to stop
easeOutExpo: function easeOutExpo(t) {
if (t === 1) {
return 1;
}

return -Math.pow(2, -10 * t) + 1;
},

// Exponential acceleration and deceleration
easeInOutExpo: function easeInOutExpo(t) {
if (t === 0 || t === 1) {
return t;
}

var scaledTime = t * 2;
var scaledTime1 = scaledTime - 1;

if (scaledTime < 1) {
return 0.5 * Math.pow(2, 10 * scaledTime1);
}

return 0.5 * (-Math.pow(2, -10 * scaledTime1) + 2);
},

// Increasing velocity until stop
easeInCirc: function easeInCirc(t) {
var scaledTime = t / 1;
return -1 * (Math.sqrt(1 - scaledTime * t) - 1);
},

// Start fast, decreasing velocity until stop
easeOutCirc: function easeOutCirc(t) {
var t1 = t - 1;
return Math.sqrt(1 - t1 * t1);
},

// Fast increase in velocity, fast decrease in velocity
easeInOutCirc: function easeInOutCirc(t) {
var scaledTime = t * 2;
var scaledTime1 = scaledTime - 2;

if (scaledTime < 1) {
return -0.5 * (Math.sqrt(1 - scaledTime * scaledTime) - 1);
}

return 0.5 * (Math.sqrt(1 - scaledTime1 * scaledTime1) + 1);
},

// Slow movement backwards then fast snap to finish
easeInBack: function easeInBack(t) {
var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1.70158;

return t * t * ((magnitude + 1) * t - magnitude);
},

// Fast snap to backwards point then slow resolve to finish
easeOutBack: function easeOutBack(t) {
var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1.70158;

var scaledTime = t / 1 - 1;

return scaledTime * scaledTime * ((magnitude + 1) * scaledTime + magnitude) + 1;
},

// Slow movement backwards, fast snap to past finish, slow resolve to finish
easeInOutBack: function easeInOutBack(t) {
var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1.70158;

var scaledTime = t * 2;
var scaledTime2 = scaledTime - 2;

var s = magnitude * 1.525;

if (scaledTime < 1) {
return 0.5 * scaledTime * scaledTime * ((s + 1) * scaledTime - s);
}

return 0.5 * (scaledTime2 * scaledTime2 * ((s + 1) * scaledTime2 + s) + 2);
},

// Bounces slowly then quickly to finish
easeInElastic: function easeInElastic(t) {
var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.7;

if (t === 0 || t === 1) {
return t;
}

var scaledTime = t / 1;
var scaledTime1 = scaledTime - 1;

var p = 1 - magnitude;
var s = p / (2 * Math.PI) * Math.asin(1);

return -(Math.pow(2, 10 * scaledTime1) * Math.sin((scaledTime1 - s) * (2 * Math.PI) / p));
},

// Fast acceleration, bounces to zero
easeOutElastic: function easeOutElastic(t) {
var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.7;

var p = 1 - magnitude;
var scaledTime = t * 2;

if (t === 0 || t === 1) {
return t;
}

var s = p / (2 * Math.PI) * Math.asin(1);
return Math.pow(2, -10 * scaledTime) * Math.sin((scaledTime - s) * (2 * Math.PI) / p) + 1;
},

// Slow start and end, two bounces sandwich a fast motion
easeInOutElastic: function easeInOutElastic(t) {
var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.65;

var p = 1 - magnitude;

if (t === 0 || t === 1) {
return t;
}

var scaledTime = t * 2;
var scaledTime1 = scaledTime - 1;

var s = p / (2 * Math.PI) * Math.asin(1);

if (scaledTime < 1) {
return -0.5 * (Math.pow(2, 10 * scaledTime1) * Math.sin((scaledTime1 - s) * (2 * Math.PI) / p));
}

return Math.pow(2, -10 * scaledTime1) * Math.sin((scaledTime1 - s) * (2 * Math.PI) / p) * 0.5 + 1;
},

// Bounce to completion
easeOutBounce: function easeOutBounce(t) {
var scaledTime = t / 1;

if (scaledTime < 1 / 2.75) {
return 7.5625 * scaledTime * scaledTime;
} else if (scaledTime < 2 / 2.75) {
var scaledTime2 = scaledTime - 1.5 / 2.75;
return 7.5625 * scaledTime2 * scaledTime2 + 0.75;
} else if (scaledTime < 2.5 / 2.75) {
var _scaledTime = scaledTime - 2.25 / 2.75;
return 7.5625 * _scaledTime * _scaledTime + 0.9375;
} else {
var _scaledTime2 = scaledTime - 2.625 / 2.75;
return 7.5625 * _scaledTime2 * _scaledTime2 + 0.984375;
}
},

// Bounce increasing in velocity until completion
easeInBounce: function easeInBounce(t) {
return 1 - easeOutBounce(1 - t);
},

// Bounce in and bounce out
easeInOutBounce: function easeInOutBounce(t) {
if (t < 0.5) {
return easeInBounce(t * 2) * 0.5;
}

return easeOutBounce(t * 2 - 1) * 0.5 + 0.5;
}
};
``````