Skip to main content

Easing

The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations.

You can find a visualization of some common easing functions at https://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​

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.

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

ease()​

static ease(t: number);

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

https://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.

https://easings.net/#easeInQuad

cubic()​

static cubic(t: number);

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

https://easings.net/#easeInCubic

poly()​

static poly(n: number);

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

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

sin()​

static sin(t: number);

A sinusoidal function.

https://easings.net/#easeInSine

circle()​

static circle(t: number);

A circular function.

https://easings.net/#easeInCirc

exp()​

static exp(t: number);

An exponential function.

https://easings.net/#easeInExpo

elastic()​

static elastic(bounciness: 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.

https://easings.net/#easeInElastic

back()​

static back(s)

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.

https://easings.net/#easeInBounce

bezier()​

static bezier(x1: number, y1: number, x2: number, y2: 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 https://cubic-bezier.com/

in()​

static in(easing: number);

Runs an easing function forwards.

out()​

static out(easing: number);

Runs an easing function backwards.

inOut()​

static inOut(easing: number);

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