Easing functions

Collection of easing functions for smooth animations

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;