Enter Animations

Example

Create entrance effects by combining multiple enter base animations:

<div class="motion-opacity-in-0 motion-translate-y-in-100 motion-blur-in-md">
  Fade in, slide up, and unblur
</div>

Overview

Enter animations are triggered when elements are mounted in the DOM. They're perfect for adding animations to landing pages and animating appearing elements.

Each element will automatically animate from its starting state (the value after -in-) to its default state. For example:

• motion-opacity-in-0 starts at opacity(0) and animates to opacity(100%)
• motion-translate-y-in-100 starts at translateY(100%) and animates to translateY(0)
• motion-blur-in-md starts at blur(md) and animates to blur(0)
• motion-scale-in-75 starts at scale(75%) and animates to scale(100%)

Basic Usage

Create enter animations by using any base animation with the in direction:

<div class="motion-translate-y-in-100">
  Slide up on enter
</div>

Customizing Enter Animations

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

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

Combining Enter Animations

Stack multiple enter animations to create complex effects:

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

Presets

The plugin also includes a set of presets that combine multiple properties into single, ready-to-use classes. Check out the presets page for more information.