Parse
File Parse easing.js
This tree is parsed live from the source file.
Classes
-
{{ item.name }}
- {{ key }}
Not Classes
{{ getTree() }}
Comments
{{ getTreeComments() }}
Source
// --------------- Linear --------------------
const linearInOut = function(t) {
return t
}
// --------------- Quadratic easing functions --------------------
const quadEaseInOut = function(t) {
if(t < 0.5){
return 2 * t * t
}
return (-2 * t * t) + (4 * t) - 1
}
const quadEaseIn = function(t) {
return t * t
}
const quadEaseOut = function(t) {
return -(t * (t - 2))
}
// --------------- Cubic easing functions --------------------
const cubicEaseIn = function(t) {
return t * t * t
}
const cubicEaseOut = function(t) {
return (t - 1) * (t - 1) * (t - 1) + 1
}
const cubicEaseInOut = function(t) {
if (t < 0.5){
return 4 * t * t * t
}
var p = 2 * t - 2
return 0.5 * p * p * p + 1
}
// --------------- Quartic easing functions --------------------
const quarticEaseIn = function(t) {
return t * t * t * t
}
const quarticEaseOut = function(t) {
return (t - 1) * (t - 1) * (t - 1) * (1 - t) + 1
}
const quarticEaseInOut = function(t) {
if( t < 0.5){
return 8 * t * t * t * t
}
var p = t - 1
return -8 * p * p * p * p + 1
}
// --------------- Quintic easing functions --------------------
const quinticEaseIn = function(t) {
return t * t * t * t * t
}
const quinticEaseOut = function(t) {
return (t - 1) * (t - 1) * (t - 1) * (t - 1) * (t - 1) + 1
}
const quinticEaseInOut = function(t) {
if( t < 0.5){
return 16 * t * t * t * t * t
}
var p = (2 * t) - 2
return 0.5 * p * p * p * p * p + 1
}
// --------------- Sine easing functions --------------------
const sineEaseIn = function(t) {
return Math.sin((t - 1) * Math.PI / 2) + 1
}
const sineEaseOut = function(t) {
return Math.sin(t * Math.PI / 2)
}
const sineEaseInOut = function(t) {
return 0.5 * (1 - Math.cos(t * Math.PI))
}
// --------------- Circular easing functions --------------------
const circularEaseIn = function(t) {
return 1 - Math.sqrt(1 - (t * t))
}
const circularEaseOut = function(t) {
return Math.sqrt((2 - t) * t)
}
const circularEaseInOut = function(t) {
if( t < 0.5){
return 0.5 * (1 - Math.sqrt(1 - 4 * (t * t)))
}
return 0.5 * (Math.sqrt(-((2 * t) - 3) * ((2 * t) - 1)) + 1)
}
// --------------- Exponential easing functions --------------------
const exponentialEaseIn = function(t) {
if(t == 0){
return 0
}
return Math.pow(2, 10 * (t - 1))
}
const exponentialEaseOut = function(t) {
if(t == 1){
return 1
}
return 1 - Math.pow(2, -10 * t)
}
const exponentialEaseInOut = function(t) {
if( t == 0 || t == 1){
return t
}
if( t < 0.5){
return 0.5 * Math.pow(2, (20 * t) - 10)
}
return -0.5 * Math.pow(2, (-20 * t) + 10) + 1
}
// --------------- Elastic Easing Functions --------------------
const elasticEaseIn = function(t) {
return Math.sin(13 * Math.PI / 2 * t) * Math.pow(2, 10 * (t - 1))
}
const elasticEaseOut = function(t, p=-10) {
return Math.sin(-13 * Math.PI / 2 * (t + 1)) * Math.pow(2, p * t) + 1
}
const elasticEaseInOut = function(t) {
if (t < 0.5) {
return (
0.5
* Math.sin(13 * Math.PI / 2 * (2 * t))
* Math.pow(2, 10 * ((2 * t) - 1))
)
}
return 0.5 * (
Math.sin(-13 * Math.PI / 2 * ((2 * t - 1) + 1))
* Math.pow(2, -10 * (2 * t - 1))
+ 2
)
}
// --------------- Back Easing Functions --------------------
const backEaseIn = function(t) {
return t * t * t - t * Math.sin(t * Math.PI)
}
const backEaseOut = function(t) {
var p = 1 - t
return 1 - (p * p * p - p * Math.sin(p * Math.PI))
}
const backEaseInOut = function(t) {
if( t < 0.5){
var p = 2 * t
return 0.5 * (p * p * p - p * Math.sin(p * Math.PI))
}
var p = 1 - (2 * t - 1)
return 0.5 * (1 - (p * p * p - p * Math.sin(p * Math.PI))) + 0.5
}
// --------------- Bounce Easing Functions --------------------
const bounceEaseIn = function(t) {
return 1 - bounceEaseOut(1 - t)
}
const bounceEaseOut = function(t) {
if (t < 4 / 11) {
return 121 * t * t / 16
}
if (t < 8 / 11) {
return (363 / 40.0 * t * t) - (99 / 10.0 * t) + 17 / 5.0
}
if (t < 9 / 10) {
return (4356 / 361.0 * t * t) - (35442 / 1805.0 * t) + 16061 / 1805.0
}
return (54 / 5.0 * t * t) - (513 / 25.0 * t) + 268 / 25.0
}
const bounceEaseInOut = function(t) {
if( t < 0.5){
return 0.5 * bounceEaseIn(t * 2)
}
return 0.5 * bounceEaseOut(t * 2 - 1) + 0.5
}
// ----
//
const multiEase = function(...functions) {
const mergeFuncs = functions
const stepper = function(t){
let r = 0
mergeFuncs.forEach(e=>r += e(t))
return r / mergeFuncs.length
}
return stepper
}
const easingFunctions = {
/* A neat little collector for easing methods - built into an object.
easing = EasingFunctions
easing.quad.inOut
easing.quad.in
easing.quad.out
*/
defaultName: 'linear'
, get(name=this.defaultName, anchor='inOut') {
return this[name][anchor]
}
, linear: {
inOut: linearInOut
}
, quad:{
in: quadEaseIn
, out: quadEaseOut
, inOut: quadEaseInOut
}
, cubic:{
in: cubicEaseIn
, out: cubicEaseOut
, inOut: cubicEaseInOut
}
, quartic:{
in: quarticEaseIn
, out: quarticEaseOut
, inOut: quarticEaseInOut
}
, quintic:{
in: quinticEaseIn
, out: quinticEaseOut
, inOut: quinticEaseInOut
}
, sine:{
in: sineEaseIn
, out: sineEaseOut
, inOut: sineEaseInOut
}
, circular:{
in: circularEaseIn
, out: circularEaseOut
, inOut: circularEaseInOut
}
, exponential:{
in: exponentialEaseIn
, out: exponentialEaseOut
, inOut: exponentialEaseInOut
}
, elastic:{
in: elasticEaseIn
, out: elasticEaseOut
, inOut: elasticEaseInOut
}
, back:{
in: backEaseIn
, out: backEaseOut
, inOut: backEaseInOut
}
, bounce:{
in: bounceEaseIn
, out: bounceEaseOut
, inOut: bounceEaseInOut
}
}
copy