# EasingFunctions

EasingFunctions is a helper class with a collection of easing functions. Easing functions are used to calculate interpolation to create an animation.

These functions take a value from 0 to 1 representing how far into the animation you are (0 = beginning, 1 = end). Think of this as the “percent complete”. You can use easing functions in an update loop to update your object every frame. The Animation action nodes have all this set up for you already.

This is a simplified example of how we use EasingFunctions in a position animation node. This example makes my entity fall to position {0, 0, 0} with a bounce out animation.

```let duration = 5;               // length of the animation in seconds
let phaseT = 0;                 // how far into the animation we are (percentage complete)
let target = new Vec3(0, 0, 0); // the ending position of my object
let done = false;               // flag to detect when to stop animating

let animObj;                    // the object we're animating
let startPos;                   // our object's initial position

function start(){
animObj = this.entity();
startPos = animObj.position();
}

function update(dt) {
if (done) return; // don't run this code if the animation is complete
phaseT += dt / duration; // calculate the time difference since the last update call
phaseT = Math.min(phaseT, 1); // don't allow the percentage complete to go over 100%

// Pass the percentage complete into the EasingFunction,
// which will return the factor we need to multiply by to
// find our target position for this frame:
let anim = EasingFunctions.outBounce(phaseT);

// determine the new position based on the starting position, target position, and animation factor:
let aPos = new Vec3;
aPos.x = startPos.x * (1 - anim) + target.x * anim;
aPos.y = startPos.y * (1 - anim) + target.y * anim;
aPos.z = startPos.z * (1 - anim) + target.z * anim;

// set the new position
animObj.setPosition(aPos.x, aPos.y, aPos.z);

if (phaseT == 1) {
// if we reach 100% complete, set the flag to stop running the animation code
done = true;
}
}

```

## Supported Easing Functions

Here is a website with graphs of all the easing functions, for visualization.

```EasingFunctions = {
linear
inCube
outCube
inOutCube
inQuart
outQuart
inOutQuart
inQuint
outQuint
inOutQuint
inSine
outSine
inOutSine
inExpo
outExpo
inOutExpo
inCirc
outCirc
inOutCirc
inBack
outBack
inOutBack
inBounce
outBounce
inOutBounce
inElastic
outElastic
inOutElastic
}
```