Easing

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)

Core APIs

Hooks

Interaction

Accessibility & Internationalization

Developer Tools

Networking

Storage

Android APIs

iOS APIs

Predefined Animations

`ease()`

`elastic()`

`back()`

`bounce()`

Standard Functions

`linear()`

`quad()`

`cubic()`

`poly()`

Mathematical Functions

`sin()`

`circle()`

`exp()`

`bezier()`

Modifier Functions

`in()`

`out()`

`inOut()`

Step Functions

`step0()`

`step1()`

Complete Example

Common Patterns

Smooth Entry Animation

Bouncy Button Press

Smooth Bidirectional

Natural Deceleration

​Predefined Animations

​ease()

​elastic()

​back()

​bounce()

​Standard Functions

​linear()

​quad()

​cubic()

​poly()

​Mathematical Functions

​sin()

​circle()

​exp()

​bezier()

​Modifier Functions

​in()

​out()

​inOut()

​Step Functions

​step0()

​step1()

​Complete Example

​Common Patterns

​Smooth Entry Animation

​Bouncy Button Press

​Smooth Bidirectional

​Natural Deceleration

Predefined Animations

`ease()`

`elastic()`

`back()`

`bounce()`

Standard Functions

`linear()`

`quad()`

`cubic()`

`poly()`

Mathematical Functions

`sin()`

`circle()`

`exp()`

`bezier()`

Modifier Functions

`in()`

`out()`

`inOut()`

Step Functions

`step0()`

`step1()`

Complete Example

Common Patterns

Smooth Entry Animation

Bouncy Button Press

Smooth Bidirectional

Natural Deceleration