Timing Animations

Timing animations transition from one value to another over a fixed duration with an easing curve. They are the default animation type in react-native-ease and map directly to CABasicAnimation on iOS and ObjectAnimator on Android.

<EaseView
  animate={{ opacity: isVisible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300, easing: 'easeOut' }}
/>

Parameters

Parameter	Type	Default	Description
`type`	`'timing'`	—	Selects timing animation
`duration`	`number`	`300`	Duration in milliseconds
`easing`	`EasingType`	`'easeInOut'`	Easing curve — preset name or `[x1, y1, x2, y2]` cubic bezier
`delay`	`number`	`0`	Delay in milliseconds before the animation starts
`loop`	`'repeat' \| 'reverse'`	—	`'repeat'` restarts from the beginning, `'reverse'` alternates direction

Easing Presets

Value	Behavior	Cubic bezier
`'linear'`	Constant speed	`[0, 0, 1, 1]`
`'easeIn'`	Starts slow, accelerates	`[0.42, 0, 1, 1]`
`'easeOut'`	Starts fast, decelerates	`[0, 0, 0.58, 1]`
`'easeInOut'`	Slow start and end, fast middle (default)	`[0.42, 0, 0.58, 1]`

Custom Cubic Bezier

Pass a [x1, y1, x2, y2] tuple for a custom easing curve. The values correspond to the two control points of the bezier curve and match the CSS cubic-bezier() function exactly.

x-values (x1, x2) must be between 0 and 1
y-values (y1, y2) can exceed 0–1 to produce overshoot or anticipation effects

Examples

Basic timing fade

<EaseView
  animate={{ opacity: isVisible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300, easing: 'easeOut' }}
/>

Material Design standard easing

<EaseView
  animate={{ opacity: isVisible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300, easing: [0.4, 0, 0.2, 1] }}
/>

Overshoot easing

Y-values outside 0–1 produce overshoot. The curve below creates a spring-like snap past the target before settling.

<EaseView
  animate={{ scale: active ? 1.2 : 1 }}
  transition={{ type: 'timing', duration: 500, easing: [0.68, -0.55, 0.265, 1.55] }}
/>

Delayed start

<EaseView
  initialAnimate={{ opacity: 0, translateY: 20 }}
  animate={{ opacity: 1, translateY: 0 }}
  transition={{ type: 'timing', duration: 300, easing: 'easeOut', delay: 150 }}
/>

Choose 'easeOut' for elements entering the screen (fast start feels responsive), 'easeIn' for elements leaving (slow start, then gone), and 'easeInOut' for in-place transitions where smoothness matters more than speed.

Get Started

Animations

Features

Guides

Parameters

Easing Presets

Custom Cubic Bezier

Examples

Basic timing fade

Material Design standard easing

Overshoot easing

Delayed start

​Parameters

​Easing Presets

​Custom Cubic Bezier

​Examples

​Basic timing fade

​Material Design standard easing

​Overshoot easing

​Delayed start

Parameters

Easing Presets

Custom Cubic Bezier

Examples

Basic timing fade

Material Design standard easing

Overshoot easing

Delayed start