Skip to main content
Easing functions modify the rate of change over time, creating more natural-looking animations.

​
Easing

The Easing object provides a comprehensive collection of easing functions. 
import { Easing } from '@heliosvideo/core';

​
Basic functions

​
linear

No easing, constant rate. 
const value = Easing.linear(t);

​
step

Steps through values in discrete increments. 
const stepFn = Easing.step(4); // 4 steps
const value = stepFn(t);
​
steps
number
required
Number of steps

​
bezier

Creates a cubic bezier easing function. 
const easeFn = Easing.bezier(0.25, 0.1, 0.25, 1.0);
const value = easeFn(t);
​
mX1
number
required
X coordinate of first control point
​
mY1
number
required
Y coordinate of first control point
​
mX2
number
required
X coordinate of second control point
​
mY2
number
required
Y coordinate of second control point

​
Polynomial easing

​
Quad

Quadratic easing (power of 2). 
Easing.quad.in(t)    // Accelerating from zero velocity
Easing.quad.out(t)   // Decelerating to zero velocity
Easing.quad.inOut(t) // Acceleration until halfway, then deceleration

​
Cubic

Cubic easing (power of 3). 
Easing.cubic.in(t)
Easing.cubic.out(t)
Easing.cubic.inOut(t)

​
Quart

Quartic easing (power of 4). 
Easing.quart.in(t)
Easing.quart.out(t)
Easing.quart.inOut(t)

​
Quint

Quintic easing (power of 5). 
Easing.quint.in(t)
Easing.quint.out(t)
Easing.quint.inOut(t)

​
Transcendental easing

​
Sine

Sinusoidal easing. 
Easing.sine.in(t)
Easing.sine.out(t)
Easing.sine.inOut(t)

​
Expo

Exponential easing. 
Easing.expo.in(t)
Easing.expo.out(t)
Easing.expo.inOut(t)

​
Circ

Circular easing. 
Easing.circ.in(t)
Easing.circ.out(t)
Easing.circ.inOut(t)

​
Physical easing

​
Back

Easing with overshoot. 
Easing.back.in(t)    // Backs up before moving forward
Easing.back.out(t)   // Overshoots and returns
Easing.back.inOut(t) // Backs up and overshoots

​
Elastic

Elastic spring-like easing. 
Easing.elastic.in(t)
Easing.elastic.out(t)
Easing.elastic.inOut(t)

​
Bounce

Bouncing easing. 
Easing.bounce.in(t)
Easing.bounce.out(t)
Easing.bounce.inOut(t)

​
Usage examples

​
With interpolate

import { interpolate, Easing } from '@heliosvideo/core';

const x = interpolate(
  frame,
  [0, 100],
  [0, 500],
  { easing: Easing.cubic.out }
);

​
With transition

import { transition, Easing } from '@heliosvideo/core';

const opacity = transition(
  frame,
  0,
  60,
  { easing: Easing.quad.inOut }
);

​
Custom bezier curves

import { Easing } from '@heliosvideo/core';

// CSS ease equivalent
const ease = Easing.bezier(0.25, 0.1, 0.25, 1.0);

// CSS ease-in equivalent
const easeIn = Easing.bezier(0.42, 0, 1.0, 1.0);

// CSS ease-out equivalent
const easeOut = Easing.bezier(0, 0, 0.58, 1.0);

// CSS ease-in-out equivalent
const easeInOut = Easing.bezier(0.42, 0, 0.58, 1.0);

​
Step function

import { Easing, interpolate } from '@heliosvideo/core';

// 8-bit style stepped animation
const y = interpolate(
  frame,
  [0, 100],
  [0, 200],
  { easing: Easing.step(8) }
);

​
Visualization

All easing functions expect input t in the range [0, 1] and return output in approximately the range [0, 1] (some physical easings like back and elastic may overshoot).
  • In: Slow start, fast end
  • Out: Fast start, slow end
  • InOut: Slow start, fast middle, slow end

​
Type

type EasingFunction = (t: number) => number;