Exit Animations

Basic Usage

Create exit animations by using the out direction with any base animation:

<div class="motion-translate-y-out-100">
  Slide down and fade out
</div>

Overview

Exit animations are CSS animations that transition elements to a final "exit" state. These classes provide the animation styles, but don't handle any DOM removal logic - you'll need to combine them with UI libraries or custom code to manage element removal:

Each element will animate from its default state to its exit state (the value after -out-). For example:

• motion-opacity-out-0 animates from opacity(100%) to opacity(0)
• motion-translate-y-out-100 animates from translateY(0) to translateY(100%)
• motion-blur-out-md animates from blur(0) to blur(md)
• motion-scale-out-75 animates from scale(100%) to scale(75%)

Available Properties

The following properties can be animated on exit:

• Scale
• Translate
• Opacity
• Rotation
• Blur
• Background color
• Text color
• Grayscale

Customizing Exit Animations

You can customize exit animations using modifiers. See the applying modifiers guide for more details:

<div class="motion-translate-y-out-100 motion-duration-[2s] motion-ease-spring-smooth">
  Slow, smooth exit
</div>

Combining Exit Animations

Stack multiple exit animations to create complex effects:

<div class="motion-translate-y-out-100 motion-rotate-out-45 motion-blur-out-sm">
  Complex exit animation
</div>