transitionTimingFunction

transitionTimingFunction lets you adjust how intermediate values are calculated during the transition. Defaults to ease.

Loading...

Reference

function App() {
  return (
    <Animated.View
      style={{
        transitionProperty: 'height',
        transitionDuration: 300,
        transitionTimingFunction: 'ease-out',
      }}
    />
  );
}

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 =
  | 'jump-start'
  | 'start'
  | 'jump-end'
  | 'end'
  | 'jump-none'
  | 'jump-both';

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

type PredefinedTimingFunction =
  | 'linear'
  | 'ease'
  | 'ease-in'
  | 'ease-out'
  | 'ease-in-out'
  | 'step-start'
  | 'step-end';

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

type CSSTimingFunction = PredefinedTimingFunction | ParametrizedTimingFunction;
type CSSTransitionTimingFunction = 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,
• ease-in - starts slow and accelerates,
• ease-out - starts quickly and decelerates,
• ease-in-out - starts slowly, speeds up, and then slows down again.
• step-start - jumps instantly at the start,
• step-end - jumps instantly at the end.

transitionTimingFunction: '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';

transitionTimingFunction: 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';

transitionTimingFunction: 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 jump-end.
  • jump-start - a left-continuous function, where the first jump occurs at the start of the transition,
  • jump-end - a right-continuous function, where the final jump occurs at the end of the transition,
  • jump-none - no jump on either end. Maintaining a hold at both the 0% and 100% points, each for 1/n of the total duration,
  • jump-both - adds pauses at both the 0% and 100% points, introducing an additional step during the transition,
  • start - an alias for jump-start,
  • end - an alias for jump-end,

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

transitionTimingFunction: steps(4, 'jump-end'),

<timing function[]>

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

transitionTimingFunction: ['linear', steps(60, 'jump-none'), 'ease-in-out'];
transitionProperty: ['width', 'transform', 'borderRadius'];

In the following example, the width property will be transitions using linear easing, transform will use the steps timing function, and borderRadius will be transitioned using ease-in-out easing.

Examples

Steps

Loading...

Platform compatibility

Android	iOS	Web
✅	✅	✅