Skip to main content
Version: 4.x

Entering/Exiting animations

Entering/Exiting animations let you animate elements when they are added to or removed from the view hierarchy.

Reanimated comes with a bunch of predefined animations you can customize. For more advanced use-cases, you can use Keyframes or create your own custom entering/exiting animations.

Loading...
info

Spring-based animations are yet to be introduced to the web. Due to that, playground doesn't cover springify() options but they can be applied to your animations on iOS and Android platforms.

Remarks​

  • We recommend using layout animation builders outside of components or with useMemo to ensure the best performance.
  • On the New Architecture:
    • nativeID is used internally to configure entering animations, so overwriting it will result in entering animations not running. Some components (e.g. TouchableWithoutFeedback) overwrite nativeID of its children. To work around this issue wrap your animated children with a View.
    • removing a non-animated view will trigger exiting animations in its children, but the non-animated view will not wait for the children's animations to finish. This is due to view flattening and can be mitigated by using collapsable={false}.

Fade​

FadeX lets you create a fading animation.

import { FadeIn, FadeOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={FadeIn} exiting={FadeOut} />;
}

Available fade animations:

Entering​

  • FadeIn

  • FadeInRight

  • FadeInLeft

  • FadeInUp

  • FadeInDown

Exiting​

  • FadeOut

  • FadeOutRight

  • FadeOutLeft

  • FadeOutUp

  • FadeOutDown

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
FadeIn{opacity: 0}
FadeInDown{opacity: 0, transform: [{ translateY: 25 }]}
FadeInLeft{opacity: 0, transform: [{ translateX: -25 }]}
FadeInRight{opacity: 0, transform: [{ translateX: 25 }]}
FadeInUp{opacity: 0, transform: [{ translateY: -25 }]}
FadeOut{opacity: 1}
FadeOutDown{opacity: 1, transform: [{ translateY: 0 }]}
FadeOutLeft{opacity: 1, transform: [{ translateX: 0 }]}
FadeOutRight{opacity: 1, transform: [{ translateX: 0 }]}
FadeOutUp{opacity: 1, transform: [{ translateY: 0 }]}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

FadeOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

FadeInUp.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(5);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

FadeInDown.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ transform: [{ translateY: 420 }] })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Bounce​

BounceX lets you create a bouncing animation.

import { BounceIn, BounceOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={BounceIn} exiting={BounceOut} />;
}

Available bounce animations:

Entering​

  • BounceIn

  • BounceInRight

  • BounceInLeft

  • BounceInUp

  • BounceInDown

Exiting​

  • BounceOut

  • BounceOutRight

  • BounceOutLeft

  • BounceOutUp

  • BounceOutDown

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
BounceIn{transform: [{ scale: 0 }]}
BounceInRight{transform: [{ translateX: values.windowWidth }]}
BounceInLeft{transform: [{ translateX: -values.windowWidth }]}
BounceInUp{transform: [{ translateY: -values.windowHeight }]}
BounceInDown{transform: [{ translateY: values.windowHeight}]}
BounceOut{transform: [{ scale: 1 }]}
BounceOutRight{transform: [{ translateX: 0 }]}
BounceOutLeft{transform: [{ translateX: 0 }]}
BounceOutUp{transform: [{ translateY: 0 }]}
BounceOutDown{transform: [{ translateY: 0 }]}

Modifiers
Optional
​

BounceInDown.duration(500)
  .delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ transform: [{ translateY: -420 }] })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 600.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Flip​

FlipX lets you create animation based on rotation over specific axis.

import { FlipInEasyX, FlipOutEasyX } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={FlipInEasyX} exiting={FlipOutEasyX} />;
}

Available flip animations:

Entering​

  • FlipInEasyX

  • FlipInEasyY

  • FlipInXDown

  • FlipInXUp

  • FlipInYLeft

  • FlipInYRight

Exiting​

  • FlipOutEasyX

  • FlipOutEasyY

  • FlipOutXDown

  • FlipOutXUp

  • FlipOutYLeft

  • FlipOutYRight

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
FlipInEasyX{transform: [{ perspective: 500 }, { rotateX: '90deg' }]}
FlipInEasyY{transform: [{ perspective: 500 }, { rotateY: '90deg' }]}
FlipInXDown{transform: [{ perspective: 500 }, { rotateX: '-90deg' }, { translateY: targetValues.targetHeight }]}
FlipInXUp{transform: [{ perspective: 500 }, { rotateX: '90deg' }, { translateY: -targetValues.targetHeight }]}
FlipInYLeft{transform: [{ perspective: 500 }, { rotateY: '-90deg' }, { translateX: -targetValues.targetWidth } ]}
FlipInYRight{transform: [{ perspective: 500 }, { rotateY: '90deg' }, { translateX: targetValues.targetWidth } ]}
FlipOutEasyX{transform: [{ perspective: 500 }, { rotateX: '0deg' }]}
FlipOutEasyY{transform: [{ perspective: 500 }, { rotateY: '0deg' }]}
FlipOutXDown{transform: [{ perspective: 500 }, { rotateX: '0deg' }, { translateY: 0 }]}
FlipOutXUp{transform: [{ perspective: 500 }, { rotateX: '0deg' }, { translateY: 0 }]}
FlipOutYLeft{transform: [{ perspective: 500 }, { rotateY: '0deg' }, { translateX: 0 }]}
FlipOutYRight{transform: [{ perspective: 500 }, { rotateY: '0deg' }, { translateX: 0 }]}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

FlipOutYLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

FlipInXUp.springify()
  .damping(2)
  .mass(3)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(5);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

FlipInEasyY.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({
    transform: [{ perspective: 100 }, { rotateY: '123deg' }],
  })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

LightSpeed​

LightSpeedX lets you create an animation of a horizontally moving object with a change of opacity and skew.

import { LightSpeedInRight, LightSpeedOutLeft } from 'react-native-reanimated';

function App() {
  return (
    <Animated.View entering={LightSpeedInRight} exiting={LightSpeedOutLeft} />
  );
}

Available lightspeed animations:

Entering​

  • LightSpeedInRight

  • LightSpeedInLeft

Exiting​

  • LightSpeedOutRight

  • LightSpeedOutLeft

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
LightSpeedInLeft{opacity: 0, transform: [{ translateX: -values.windowWidth }, { skewX: '45deg' }]}
LightSpeedInRight{opacity: 0, transform: [{ translateX: values.windowWidth }, { skewX: '-45deg' }]}
LightSpeedOutLeft{opacity: 1, transform: [{ translateX: 0 }, { skewX: '0deg' }]}
LightSpeedOutRight{opacity: 1, transform: [{ translateX: 0 }, { skewX: '0deg' }]}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

LightSpeedOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

LightSpeedInLeft.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(5);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

LightSpeedInRight.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({
    transform: [{ translateX: -100 }, { skewX: '-10deg' }],
  })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Pinwheel​

PinwheelX lets you create an animation based on rotation, scale, and opacity.

import { PinwheelIn, PinwheelOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={PinwheelIn} exiting={PinwheelOut} />;
}

Available pinwheel animations:

Entering​

  • PinwheelIn

Exiting​

  • PinwheelOut

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
PinwheelIn{opacity: 0, transform: [{ scale: 0 }, {rotate: '5'}]}
PinwheelOut{opacity: 1, transform: [{ scale: 1 }, {rotate: '0'}]}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

PinwheelOut.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

PinwheelIn.springify()
  .damping(2)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(5);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

PinwheelIn.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({
    transform: [{ scale: 0.8 }, { rotate: '3' }],
  })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Roll​

RollX lets you create an animation of a horizontally moving object with a rotation.

import { RollInRight, RollOutLeft } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={RollInRight} exiting={RollOutLeft} />;
}

Available roll animations:

Entering​

  • RollInRight

  • RollInLeft

Exiting​

  • RollOutRight

  • RollOutLeft

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
RollInLeft{transform: [{ translateX: -values.windowWidth }, { rotate: '-180deg' }]}
RollInRight{transform: [{ translateX: values.windowWidth }, { rotate: '180deg' }]}
RollOutLeft{transform: [{ translateX: 0 }, { rotate: '0deg' }]}
RollOutRight{transform: [{ translateX: 0 }, { rotate: '0deg' }]}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

RollOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

RollInLeft.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(5);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

RollInRight.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ transform: [{ translateX: 100 }, { rotate: '-45deg' }] })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Rotate​

RotateX lets you create a rotation animation.

import { RotateInDownLeft, RotateOutDownLeft } from 'react-native-reanimated';

function App() {
  return (
    <Animated.View entering={RotateInDownLeft} exiting={RotateOutDownLeft} />
  );
}

Available rotate animations:

Entering​

  • RotateInDownLeft

  • RotateInDownRight

  • RotateInUpLeft

  • RotateInUpRight

Exiting​

  • RotateOutDownLeft

  • RotateOutDownRight

  • RotateOutUpLeft

  • RotateOutUpRight

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
RotateInDownLeft{opacity: 0, transform: [{ rotate: '-90deg' }, { translateX: values.targetWidth / 2 - values.targetHeight / 2 }, { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) }]}
RotateInDownRight{opacity: 0, transform: [{ rotate: '90deg' }, { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) }, { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) }]}
RotateInUpLeft{opacity: 0, transform: [{ rotate: '90deg' }, { translateX: values.targetWidth / 2 - values.targetHeight / 2 }, { translateY: values.targetWidth / 2 - values.targetHeight / 2 }]}
RotateInUpRight{opacity: 0, transform: [{ rotate: '-90deg' }, { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) }, { translateY: values.targetWidth / 2 - values.targetHeight / 2 }]}
RotateOutDownLeft{opacity: 1, transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }]}
RotateOutDownRight{opacity: 1, transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }]}
RotateOutUpLeft{opacity: 1, transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }]}
RotateOutUpRight{opacity: 1, transform: [{ rotate: '0deg' }, { translateX: 0 }, { translateY: 0 }]}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

RotateOutDownRight.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

RotateInUpLeft.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(5);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

RotateInDownLeft.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({
    transform: [{ rotate: '-90deg' }, { translateX: 100 }, { translateY: 100 }],
  })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Slide​

SlideX lets you create an animation of horizontal or vertical moving object.

import { SlideInRight, SlideOutLeft } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={SlideInRight} exiting={SlideOutLeft} />;
}

Available slide animations:

Entering​

  • SlideInRight

  • SlideInLeft

  • SlideInUp

  • SlideInDown

Exiting​

  • SlideOutRight

  • SlideOutLeft

  • SlideOutUp

  • SlideOutDown

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
SlideInDown{originY: values.targetOriginY + values.windowHeight}
SlideInLeft{originX: values.targetOriginX - values.windowWidth}
SlideInRight{originX: values.targetOriginX + values.windowWidth}
SlideInUp{originY: -values.windowHeight}
SlideOutDown{originY: values.currentOriginY}
SlideOutLeft{originX: values.currentOriginX}
SlideOutRight{originX: values.currentOriginX}
SlideOutUp{originY: values.currentOriginY}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

SlideOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

SlideInUp.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(5);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

SlideInDown.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ transform: [{ translateY: 420 }] })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Stretch​

StretchX lets you create an animation based on scaling in X or Y axis.

import { StretchInX, StretchOutY } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={StretchInX} exiting={StretchOutY} />;
}

Available stretch animations:

Entering​

  • StretchInX

  • StretchInY

Exiting​

  • StretchOutX

  • StretchOutY

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
StretchInX{transform: [{ scaleX: 0 }]}
StretchInY{transform: [{ scaleY: 0 }]}
StretchOutX{transform: [{ scaleX: 1 }]}
StretchOutY{transform: [{ scaleY: 1 }]}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

StretchOutX.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

StretchInX.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(5);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

StretchInY.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ transform: [{ scaleY: 0.5 }] })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Zoom​

ZoomX lets you create an animation based on scale.

import { ZoomIn, ZoomOut } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={ZoomIn} exiting={ZoomOut} />;
}

Available zoom animations:

Entering​

  • ZoomIn

  • ZoomInDown

  • ZoomInEasyDown

  • ZoomInEasyUp

  • ZoomInLeft

  • ZoomInRight

  • ZoomInRotate

  • ZoomInUp

Exiting​

  • ZoomOut

  • ZoomOutDown

  • ZoomOutEasyDown

  • ZoomOutEasyUp

  • ZoomOutLeft

  • ZoomOutRight

  • ZoomOutRotate

  • ZoomOutUp

Initial values

These are the initial values for each animation that can be customized with the withInitialValues modifier.

NameConfig
ZoomIn{transform: [{ scale: 0 }]}
ZoomInDown{transform: [{ translateY: values.windowHeight }, { scale: 0 }]}
ZoomInEasyDown{transform: [{ translateY: values.targetHeight }, { scale: 0 }]}
ZoomInEasyUp{transform: [{ translateY: -values.targetHeight }, { scale: 0 }]}
ZoomInLeft{transform: [{ translateX: -values.windowWidth }, { scale: 0 }]}
ZoomInRight{transform: [{ translateX: values.windowWidth }, { scale: 0 }]}
ZoomInRotate{transform: [{ scale: 0 }, { rotate: rotate }]}
ZoomInUp{transform: [{ translateY: -values.windowHeight }, { scale: 0 }]}
ZoomOut{transform: [{ scale: 1 }]}
ZoomOutDown{transform: [{ translateY: 0 }, { scale: 1 }]}
ZoomOutEasyDown{transform: [{ translateY: 0 }, { scale: 1 }]}
ZoomOutEasyUp{transform: [{ translateY: 0 }, { scale: 1 }]}
ZoomOutLeft{transform: [{ translateX: 0 }, { scale: 1 }]}
ZoomOutRight{transform: [{ translateX: 0 }, { scale: 1 }]}
ZoomOutRotate{transform: [{ scale: 1 }, { rotate: '0' }]}
ZoomOutUp{transform: [{ translateY: 0 }, { scale: 1 }]}

Modifiers​

Time-based
Optional
​

Time-based modifiers relay on withTiming function.

ZoomOutLeft.duration(500).easing(Easing.ease);
  • .easing(easingFunction: EasingFunction) is an easing function which defines the animation curve. Defaults to Easing.inOut(Easing.quad)
note

Time-based modifiers have no effect when .springify() is used.

Spring-based
Optional
​

Spring-based modifiers relay on withSpring function.

ZoomInRotate.springify()
  .damping(30)
  .mass(5)
  .stiffness(10)
  .overshootClamping(false)
  .restDisplacementThreshold(0.1)
  .restSpeedThreshold(0.1);
  • .springify() enables the spring-based animation configuration.
  • .damping(value: number) decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster. Defaults to 10.
  • .mass(value: number) is the weight of the spring. Reducing this value makes the animation faster. Defaults to 1.
  • .stiffness(value: number) decides how bouncy the spring is. Defaults to 100.
  • .overshootClamping(value: boolean) decides whether a spring can bounce over the designated position. Defaults to false.
  • .restDisplacementThreshold(value: number) is the displacement below which the spring will snap to the designated position without further oscillations. Defaults to 0.001.
  • .restSpeedThreshold(value: number) is the speed in pixels per second from which the spring will snap to the designated position without further oscillations. Defaults to 2.

Common
Optional
​

ZoomIn.delay(500)
  .randomDelay()
  .reduceMotion(ReduceMotion.Never)
  .withInitialValues({ transform: [{ scale: 0.5 }] })
  .withCallback((finished) => {
    console.log(`finished without interruptions: ${finished}`);
  });
  • .duration(durationMs: number) is the length of the animation (in milliseconds). Defaults to 300.
  • .delay(durationMs: number) is the delay before the animation starts (in milliseconds). Defaults to 0.
  • .randomDelay() randomizes the delay of the animation between 0 and the provided delay. Uses 1000 ms if delay wasn't provided.
  • .reduceMotion(reduceMotion: ReduceMotion) determines how the animation responds to the device's reduced motion accessibility setting.
  • .withInitialValues(values: StyleProps) allows to override the initial config of the animation.
  • .withCallback(callback: (finished: boolean) => void) is the callback that will fire after the animation ends. Sets finished to true when animation ends without interruptions, and false otherwise.

Platform compatibility​

AndroidiOSWeb
✅✅✅

We are Software Mansion.

Hire us