Skip to main content

Easing

info

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.

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

Standard functions​

Three standard easing functions are provided:

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​

tsx
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",
      }}
    />
  );
};
tsx
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​

jsx
static step0(n): number
jsx
static step0(n): number

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

step1​

jsx
static step1(n): number
jsx
static step1(n): number

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

linear​

jsx
static linear(t): number
jsx
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​

jsx
static ease(t): number
jsx
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​

jsx
static quad(t): number
jsx
static quad(t): number

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

http://easings.net/#easeInQuad

cubic​

jsx
static cubic(t): number
jsx
static cubic(t): number

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

http://easings.net/#easeInCubic

poly()​

jsx
static poly(n): (t) => number
jsx
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​

jsx
static sin(t): number
jsx
static sin(t): number

A sinusoidal function.

http://easings.net/#easeInSine

circle​

jsx
static circle(t): number
jsx
static circle(t): number

A circular function.

http://easings.net/#easeInCirc

exp​

jsx
static exp(t): number
jsx
static exp(t): number

An exponential function.

http://easings.net/#easeInExpo

elastic()​

jsx
static elastic(bounciness): (t) =>  number
jsx
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

back()​

jsx
static back(s): (t) => number
jsx
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​

jsx
static bounce(t): number
jsx
static bounce(t): number

Provides a basic bouncing effect.

http://easings.net/#easeInBounce

See an example of how you might use it below

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

bezier()​

jsx
static bezier(x1, y1, x2, y2) => (t): number
jsx
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/

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

in(easing)​

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

Runs an easing function forwards.

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

out()​

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

Runs an easing function backwards.

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

inOut()​

jsx
static inOut(easing: (t: number) => number): (t: number) => number;
jsx
static inOut(easing: (t: number) => number): (t: number) => number;
jsx
{
  easing: Easing.inOut(Easing.ease);
}
jsx
{
  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.

See also​