Easings

Easing functions help to give a dynamic to transition. In Cartesian terms, they give a y value for x (where x is 0 .. 1). Or in temporal terms, you can think of them as giving a value at time t (where t is 0 .. 1).

Normally, a way of getting from 0 to 1 would be count upwards by some fixed amount. And if that’s all you need, ixfx’s count and numericRange functions might do the job.

For example, count by 0.1 from 0 to 1:

This is a linear function, with the same ‘speed’ throughout the progression towards the end point.

In contrast, easing functions give some dynamics to the journey. For example, maybe it starts slowly, but gets faster as it nears the end, as in this cubicIn function:

Or perhaps gathering speed quickly, but then slowing down toward the end (cubicOut):

It’s a function

It’s good to remember that easing functions are not magic. They just return a number based on an input within the range of 0..1.

An easing-function-from-scratch example is an exponential function:

const fn = (x) => Math.pow(x,2);
fn(0);    // 0
fn(0.5);  // 0.25
fn(0.75); // 0.5625
fn(1);    // 1

You can see this in action:

Try the following functions:

Function	Description
`x`	Linear, returns the same input value
`x/2`	Halves input value
`Math.sqrt(x)`	Square root of value
`Math.random() * x`	Reduces value by some random amount
`x + (0.1 - Math.random()* 0.2)`	Jitters value by up to 10%

Pre-defined functions

Pre-defined easing functions can be used directly, give it an input value between 0..1 and you get back the ‘eased’ value.


import { Easings } from "https://unpkg.com/ixfx/dist/modulation.js";
// Ease the value of 0.5
const v = Easings.Named.cubicIn(0.5); // 0.125

See the Gallery for an overview of predefined functions.

Demos

Here, the easing function advances with each tap rather than by time.

Below is the common usage of time-based easing

In this demo, a target value is reached over time using an easing function.

See more demos