The Easing module implements common easing functions. You can use it with the interpolate() API.

You can find a visualization of some common easing functions at http://easings.net/

Predefined animations

The Easing module provides several predefined animations through the following methods:

• back provides a basic animation where the object goes slightly back before moving forward
• bounce provides a bouncing animation
• ease provides a basic inertial animation
• elastic provides a basic spring interaction
• spring provides a physics-based spring animation

Standard functions

Three standard easing functions are provided:

• linear
• quad
• cubic

The poly function can be used to implement quartic, quintic, and other higher power functions.

Additional functions

Additional mathematical functions are provided by the following methods:

• bezier provides a cubic bezier curve
• circle provides a circular function
• sin provides a sinusoidal function
• exp provides an exponential function

The following helpers are used to modify other easing functions.

• in runs an easing function forwards
• inOut makes any easing function symmetrical
• out runs an easing function backwards

Example

import { AbsoluteFill, useCurrentFrame } from "remotion";
// ---cut---
import { Easing, interpolate } from "remotion";

const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const interpolated = interpolate(frame, [0, 100], [0, 1], {
    easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill
      style={{
        transform: `scale(${interpolated})`,
        backgroundColor: "red",
      }}
    />
  );
};

Reference

Methods

step0

static step0(n): number

A stepping function, returns 1 for any positive value of n.

step1

static step1(n): number

A stepping function, returns 1 if n is greater than or equal to 1.

linear

static linear(t): number

A linear function, f(t) = t. Position correlates to elapsed time one to one.

http://cubic-bezier.com/#0,0,1,1

ease

static ease(t): number

A basic inertial interaction, similar to an object slowly accelerating to speed.

http://cubic-bezier.com/#.42,0,1,1

quad

static quad(t): number

A quadratic function, f(t) = t * t. Position equals the square of elapsed time.

http://easings.net/#easeInQuad

cubic

static cubic(t): number

A cubic function, f(t) = t * t * t. Position equals the cube of elapsed time.

http://easings.net/#easeInCubic

poly()

static poly(n): (t) => number

A power function. Position is equal to the Nth power of elapsed time.

n = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint

sin

static sin(t): number

A sinusoidal function.

http://easings.net/#easeInSine

circle

static circle(t): number

A circular function.

http://easings.net/#easeInCirc

exp

static exp(t): number

An exponential function.

http://easings.net/#easeInExpo

elastic()

static elastic(bounciness): (t) =>  number

A basic elastic interaction, similar to a spring oscillating back and forth.

Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.

http://easings.net/#easeInElastic

spring()<AvailableFrom v="4.0.476" />

static spring(config?): (t) => number

Creates a spring easing function for interpolate(). The curve is normalized to the interpolation progress, so it does not take frame, fps or durationInFrames.

import {Easing, interpolate} from 'remotion';
// ---cut---
const scale = interpolate(30, [0, 60], [0, 1], {
  easing: Easing.spring({
    damping: 200,
    durationRestThreshold: 0.03,
  }),
});

The spring is measured as if it takes 30 frames.

The supported config fields are damping, mass, stiffness, overshootClamping, durationRestThreshold and allowTail.

damping?

How hard the spring decelerates. Default: 10.

mass?

The weight of the spring. Default: 1.

stiffness?

Spring stiffness coefficient. Default: 100.

overshootClamping?

Determines whether the spring can overshoot the end value. Default: false.

durationRestThreshold?<AvailableFrom v="4.0.483" />

How close the spring should get to the end value during the 30-frame easing duration. Default: same as spring().

A lower value makes the spring get closer to the end value within the interpolation segment. A higher value leaves more of the movement for the end of the segment.

allowTail?<AvailableFrom v="4.0.483" />

Allows the spring to continue past the end of the interpolation segment. Default: false.

When enabled, interpolate() lets the spring tail continue after the segment end. In multi-keyframe interpolations, the previous spring tail can keep settling while the next segment already starts.

import {Easing, interpolate} from 'remotion';
// ---cut---
const translate = interpolate(
  45,
  [0, 30, 60],
  ['0px 1000px', '0px 0px', '1000px 0px'],
  {
    easing: [
      Easing.spring({
        allowTail: true,
        damping: 200,
        durationRestThreshold: 0.03,
      }),
      Easing.spring({
        allowTail: true,
        damping: 200,
        durationRestThreshold: 0.03,
      }),
    ],
  },
);

back()

static back(s): (t) => number

Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.

bounce

static bounce(t): number

Provides a basic bouncing effect.

http://easings.net/#easeInBounce

See an example of how you might use it below

interpolate(0.5, [0, 1], [0, 1], {
  easing: Easing.bounce,
});

bezier()

static bezier(x1, y1, x2, y2) => (t): number

Provides a cubic bezier curve, equivalent to CSS Transitions' transition-timing-function.

A useful tool to visualize cubic bezier curves can be found at http://cubic-bezier.com/

interpolate(0.5, [0, 1], [0, 1], {
  easing: Easing.bezier(0.5, 0.01, 0.5, 1),
});

in(easing)

static in(easing: (t: number) => number): (t: number) => number;

Runs an easing function forwards.

{
  easing: Easing.in(Easing.ease);
}

out()

static out(easing: (t: number) => number): (t: number) => number;

Runs an easing function backwards.

{
  easing: Easing.out(Easing.ease);
}

inOut()

static inOut(easing: (t: number) => number): (t: number) => number;

{
  easing: Easing.inOut(Easing.ease);
}

Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.

Credits

The Easing API is the exact same as the one from React Native and the documentation has been copied over. Credit goes to them for this excellent API.

Compatibility

See also

• Source code for this helper

<Credits contributors={[ { username: "kaf-lamed-beyt", contribution: "Improved function signatures" }, ]} />