animationTimingFunction

animationTimingFunction lets you adjust how intermediate values are calculated during the transition. It can be specified for the entire animation or for each keyframe separately. Defaults to ease.

Loading...

Reference

function App() {
  return (
    <Animated.View
      style={{
        animationName: {
          to: {
            transform: [{ translateY: 200 }],
          },
        },
        animationDuration: '3s',
        animationTimingFunction: 'easeOut',
      }}
    />
  );
}

Type definitions

type NormalizedCubicBezierEasing = {
  name: string;
  x1: number;
  y1: number;
  x2: number;
  y2: number;
};
type NormalizedLinearEasing = {
  name: string;
  points: Point[];
};
type NormalizedStepsEasing = {
  name: string;
  points: Point[];
};

type ControlPoint = number | [number, ...Percentage[]];

type StepsModifier =
  | 'jumpStart'
  | 'start'
  | 'jumpEnd'
  | 'end'
  | 'jumpNone'
  | 'jumpBoth';

type NormalizedCSSTimingFunction =
  | PredefinedTimingFunction
  | NormalizedCubicBezierEasing
  | NormalizedLinearEasing
  | NormalizedStepsEasing;

type PredefinedTimingFunction =
  | 'linear'
  | 'ease'
  | 'easeIn'
  | 'easeOut'
  | 'easeInOut'
  | 'stepStart'
  | 'stepEnd';

interface ParametrizedTimingFunction {
  toString(): string;
  normalize(): NormalizedCSSTimingFunction;
}

type CSSTimingFunction = PredefinedTimingFunction | ParametrizedTimingFunction;
type CSSAnimationTimingFunction = CSSTimingFunction | CSSTimingFunction[];

Values

Easings control the pacing of animations and transitions.

<predefined timing function>

A string representing a predefined timing function. Available functions:

• linear - a constant speed from start to finish,
• ease - starts slow, speeds up, then slows down,
• easeIn - starts slow and accelerates,
• easeOut - starts quickly and decelerates,
• easeInOut - starts slowly, speeds up, and then slows down again.
• stepStart - jumps instantly at the start,
• stepEnd - jumps instantly at the end.

animationTimingFunction: 'linear',

<parametrized timing function>

A returned object from parametrized timing functions. Available functions:

• cubicBezier(x1: number, y1: number, x2: number, y2: number) - a Bézier curve to shape the progress of an animation. It is defined by two control points (x1, y1, x2, y2) that mathematically describe the curve.

import { cubicBezier } from 'react-native-reanimated';

animationTimingFunction: cubicBezier(0.25, 0.1, 0.5, 2),

• linear(...points: ControlPoint[]) - a simple polygonal chain that always starts at an x-value of 0 and ends at an x-value of 1. You can either specify the points' y and x coordinates or leave the x coordinates to be inferred.

import { linear } from 'react-native-reanimated';

animationTimingFunction: linear(0, [0.25, '75%'], 1),

• steps(stepsNumber: number, modifier?: StepsModifier) - creates an easing function that makes given number of even steps over increasing y-values. The second argument is a modifier that adds jumps before or after the steps. Modifier defaults to jumpEnd.
  • jumpStart - a left-continuous function, where the first jump occurs at the start of the transition,
  • jumpEnd - a right-continuous function, where the final jump occurs at the end of the transition,
  • jumpNone - no jump on either end. Maintaining a hold at both the 0% and 100% points, each for 1/n of the total duration,
  • jumpBoth - adds pauses at both the 0% and 100% points, introducing an additional step during the transition,
  • start - an alias for jumpStart,
  • end - an alias for jumpEnd,

import { steps } from 'react-native-reanimated';

animationTimingFunction: steps(4, 'jumpEnd'),

<timing function[]>

An array of timing functions. The order in this array corresponds to the array of style properties passed to the animationName.

animationTimingFunction: ['linear', steps(60, 'jumpNone'), 'easeInOut'];
transitionProperty: [bounceIn, move, slide];

In the following example, the bounceIn keyframe will be animated using linear easing, move will use the steps timing function, and slide will be animated using easeInOut easing.

Remarks

• If no subsequent keyframe specifies that property, the timing function applies until the end of the animation.

• A timing function specified in the last keyframe (100%, to, or 1) is ignored since there is no subsequent keyframe.

const square: CSSAnimationKeyframes = {
  '0%': {
    transform: [{ translateX: 0 }],
    animationTimingFunction: cubicBezier(0.25, 0.1, 0.26, 1.53),
  },
  '100%': {
    transform: [{ translateX: -80 }],
    animationTimingFunction: 'linear', // 🚨 this will be ignored
  },
};

Platform compatibility

Android	iOS	Web
✅	✅	✅