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);
bezier
Creates a cubic bezier easing function.
const easeFn = Easing.bezier(0.25, 0.1, 0.25, 1.0);
const value = easeFn(t);
X coordinate of first control point
Y coordinate of first control point
X coordinate of second control point
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;