Exiting Animations

tip

Layout Animations are available since v2.3.0

In React Native during unmounting of components from the hierarchy of views, it just disappears in the next frame. However you can beautify this process using Exiting Animations. Reanimated make a pretty animation of disappearing of component for you.

How it is possible?

Reanimated listen on changes in tree of views and if detect that some of component should disappear in next frame, It replaces this process with exiting animation. It is easy and fast. You can use predefined animations - examples below or you can define your own custom animation. If you want to create more complex animation you can use Keyframes.

How to use predefined exiting animation?

1. Import chosen animation

// AnimationName is just an example and should be replaced by real animation. For Instance FadeOut
import { AnimationName } from 'react-native-reanimated';

2. Choose Animated Component which exiting you want to animate

    // AnimatedComponent - component created by createAnimatedComponent or imported from Reanimated
    <AnimatedComponent exiting={AnimationName} >

3. Customize the animation

Different type of entering animations can be customized differently. For the complete list of option please refer to the paragraph specific to the particular animation type.

    <AnimatedComponent exiting={AnimationName.duration(3000).otherModifier()} >

Predefined Animations

Below we listed all of the currently available predefined entering animations grouped by their type. Each group contains all of its modifiers and a video presenting what it looks like when applied to a simple button.

If you cannot find an animation that suits you then you can create a custom one. If you think that the animation should be here, please open an issue or create a pull request.

Fade

Simple animation based on changing of opacity.

Animations

• FadeOut
• FadeOutRight
• FadeOutLeft
• FadeOutUp
• FadeOutDown

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Bounce

Animation based on smoothly shaking of component.

Animations

• BounceOut
• BounceOutRight
• BounceOutLeft
• BounceOutUp
• BounceOutDown

Modifiers

• duration (in ms) default: 250
• delay (in ms) default: 0
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Flip

3D animation based on flipping object over specific axis.

Animations

• FlipOutYRight
• FlipOutYLeft
• FlipOutXUp
• FlipOutXDown
• FlipOutEasyX
• FlipOutEasyY

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Stretch

Animation based on changing width or height of object.

Animations

• StretchOutX
• StretchOutY

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Zoom

Animation based on changing scale of object.

Animations

• ZoomOut
• ZoomOutRotate
• ZoomOutRight
• ZoomOutLeft
• ZoomOutUp
• ZoomOutDown
• ZoomOutEasyUp
• ZoomOutEasyDown

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Slide

Animation based on horizontal or vertical moving of object.

Animations

• SlideOutRight
• SlideOutLeft
• SlideOutUp
• SlideOutDown

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

LightSpeed

Animation based on horizontal moving of object with changing of opacity and skew.

Animations

• LightSpeedOutRight
• LightSpeedOutLeft

Modifiers

• duration (in ms) default: 250
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Pinwheel

Animation based on rotation with scale and opacity change.

Animations

• PinwheelOut

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Roll

Animation based on horizontal moving of object with rotation.

Animations

• RollOutLeft
• RollOutRight

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example

Rotate

Animation based on rotation of object.

Animations

• RotateOutDownLeft
• RotateOutDownRight
• RotateOutUpLeft
• RotateOutUpRight

Modifiers

• duration (in ms) default: 300
• delay (in ms) default: 0
• easing same easing worklet as with withTiming
• springify change animation to spring
• damping default: 10
• mass default: 1
• stiffness default: 100
• overshootClamping default: false
• restDisplacementThreshold default: 0.001
• restSpeedThreshold default: 0.001
• withCallback callback that will fire after the exit animation ends
• withInitialValues sets the initial values
• randomDelay randomize delay of the animation between 0 and provided delay ( or 1000ms if delay not provided )

Example