Skip to main content
The Easing module implements common easing functions used by Animated.timing() to convey physically believable motion in animations. You can visualize easing functions at easings.net.

​
Predefined Animations

​
ease()

static ease(t: number): number
A simple inertial animation, similar to an object slowly accelerating to speed. Equivalent to bezier(0.42, 0, 1, 1). Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 300,
  easing: Easing.ease,
  useNativeDriver: true,
}).start();

​
elastic()

static elastic(bounciness: number = 1): EasingFunction
A simple spring interaction, similar to a spring oscillating back and forth. Parameters:
  • bounciness: Controls how much the animation overshoots (default: 1)
    • 0: No overshoot
    • 1: Slight overshoot (default)
    • > 1: Overshoots multiple times
Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.elastic(2),
  useNativeDriver: true,
}).start();

​
back()

static back(s: number = 1.70158): EasingFunction
Creates an animation where the object goes slightly back before moving forward. Parameters:
  • s: Controls how far back the animation goes (default: 1.70158)
Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 400,
  easing: Easing.back(),
  useNativeDriver: true,
}).start();

​
bounce()

static bounce(t: number): number
Provides a bouncing animation effect. Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 600,
  easing: Easing.bounce,
  useNativeDriver: true,
}).start();

​
Standard Functions

​
linear()

static linear(t: number): number
A linear function, f(t) = t. Position correlates to elapsed time one-to-one. Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

​
quad()

static quad(t: number): number
A quadratic function, f(t) = t * t. Position equals the square of elapsed time. Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.quad,
  useNativeDriver: true,
}).start();

​
cubic()

static cubic(t: number): number
A cubic function, f(t) = t * t * t. Position equals the cube of elapsed time. Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.cubic,
  useNativeDriver: true,
}).start();

​
poly()

static poly(n: number): EasingFunction
A power function. Position equals the Nth power of elapsed time. Parameters:
  • n: The power exponent (e.g., 4 for quartic, 5 for quintic)
Example: 
import { Animated, Easing } from 'react-native';

// Quartic easing
Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.poly(4),
  useNativeDriver: true,
}).start();

​
Mathematical Functions

​
sin()

static sin(t: number): number
A sinusoidal function. Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.sin,
  useNativeDriver: true,
}).start();

​
circle()

static circle(t: number): number
A circular function. Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.circle,
  useNativeDriver: true,
}).start();

​
exp()

static exp(t: number): number
An exponential function. Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.exp,
  useNativeDriver: true,
}).start();

​
bezier()

static bezier(
  x1: number,
  y1: number,
  x2: number,
  y2: number
): EasingFunction
Provides a cubic bezier curve, equivalent to CSS transitions’ transition-timing-function. Parameters:
  • x1, y1: First control point
  • x2, y2: Second control point
Visualize curves at cubic-bezier.com. Example: 
import { Animated, Easing } from 'react-native';

// Custom bezier curve
Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
  useNativeDriver: true,
}).start();

​
Modifier Functions

​
in()

static in(easing: EasingFunction): EasingFunction
Runs an easing function forwards (identity function - returns the easing as-is). Example: 
import { Animated, Easing } from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.in(Easing.quad),
  useNativeDriver: true,
}).start();

​
out()

static out(easing: EasingFunction): EasingFunction
Runs an easing function backwards. Example: 
import { Animated, Easing } from 'react-native';

// Ease out (slow at the end)
Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.out(Easing.quad),
  useNativeDriver: true,
}).start();

​
inOut()

static inOut(easing: EasingFunction): EasingFunction
Makes any easing function symmetrical. The easing function runs forwards for half the duration, then backwards for the rest. Example: 
import { Animated, Easing } from 'react-native';

// Ease in and out (slow at start and end)
Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.inOut(Easing.quad),
  useNativeDriver: true,
}).start();

​
Step Functions

​
step0()

static step0(n: number): number
Returns 1 for any positive value of n, otherwise 0.

​
step1()

static step1(n: number): number
Returns 1 if n is greater than or equal to 1, otherwise 0.

​
Complete Example

import React, { useRef } from 'react';
import { Animated, View, Button, Easing } from 'react-native';

function AnimationDemo() {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(0)).current;

  const animate = () => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 500,
        easing: Easing.out(Easing.cubic),
        useNativeDriver: true,
      }),
      Animated.timing(slideAnim, {
        toValue: 100,
        duration: 600,
        easing: Easing.elastic(1.5),
        useNativeDriver: true,
      })
    ]).start();
  };

  return (
    <View>
      <Animated.View
        style={{
          opacity: fadeAnim,
          transform: [{ translateY: slideAnim }],
        }}
      >
        <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
      </Animated.View>
      <Button title="Animate" onPress={animate} />
    </View>
  );
}

​
Common Patterns

​
Smooth Entry Animation

Easing.out(Easing.cubic)

​
Bouncy Button Press

Easing.elastic(2)

​
Smooth Bidirectional

Easing.inOut(Easing.ease)

​
Natural Deceleration

Easing.bezier(0.25, 0.1, 0.25, 1)

Build docs developers (and LLMs) love

Get started for freeTalk to us