Enter Animation Presets

Rombo for Tailwind provides a collection of ready-made enter animation presets that combine multiple animation properties into single, easy-to-use classes. These presets are designed to create smooth entrance animations when elements are mounted in the DOM or enter the viewport.

Below is a complete list of available enter animation presets:

Fade in

Available sizes: motion-preset-fade-sm, motion-preset-fade-md, motion-preset-fade-lg

<div class="motion-preset-fade">
    fade
</div>

Slide right

Available sizes: motion-preset-slide-right-sm, motion-preset-slide-right-md, motion-preset-slide-right-lg

<div class="motion-preset-slide-right">
    slide-right
</div>

Slide up

Available sizes: motion-preset-slide-up-sm, motion-preset-slide-up-md, motion-preset-slide-up-lg

<div class="motion-preset-slide-up">
    slide-up
</div>

Slide left

Available sizes: motion-preset-slide-left-sm, motion-preset-slide-left-md, motion-preset-slide-left-lg

<div class="motion-preset-slide-left">
    slide-left
</div>

Slide down

Available sizes: motion-preset-slide-down-sm, motion-preset-slide-down-md, motion-preset-slide-down-lg

<div class="motion-preset-slide-down">
    slide-down
</div>

Slide up right

Available sizes: motion-preset-slide-up-right-sm, motion-preset-slide-up-right-md, motion-preset-slide-up-right-lg

<div class="motion-preset-slide-up-right">
    slide-up-right
</div>

Slide up left

Available sizes: motion-preset-slide-up-left-sm, motion-preset-slide-up-left-md, motion-preset-slide-up-left-lg

<div class="motion-preset-slide-up-left">
    slide-up-left
</div>

Slide down left

Available sizes: motion-preset-slide-down-left-sm, motion-preset-slide-down-left-md, motion-preset-slide-down-left-lg

<div class="motion-preset-slide-down-left">
    slide-down-left
</div>

Slide down right

Available sizes: motion-preset-slide-down-right-sm, motion-preset-slide-down-right-md, motion-preset-slide-down-right-lg

<div class="motion-preset-slide-down-right">
    slide-down-right
</div>

Focus

Available sizes: motion-preset-focus-sm, motion-preset-focus-md, motion-preset-focus-lg

<div class="motion-preset-focus">
    focus
</div>

Blur right

Available sizes: motion-preset-blur-right-sm, motion-preset-blur-right-md, motion-preset-blur-right-lg

<div class="motion-preset-blur-right">
    blur-right
</div>

Blur left

Available sizes: motion-preset-blur-left-sm, motion-preset-blur-left-md, motion-preset-blur-left-lg

<div class="motion-preset-blur-left">
    blur-left
</div>

Blur up

Available sizes: motion-preset-blur-up-sm, motion-preset-blur-up-md, motion-preset-blur-up-lg

<div class="motion-preset-blur-up">
    blur-up
</div>

Blur down

Available sizes: motion-preset-blur-down-sm, motion-preset-blur-down-md, motion-preset-blur-down-lg

<div class="motion-preset-blur-down">
    blur-down
</div>

Rebound right

<div class="motion-preset-rebound-right">
    rebound-right
</div>

Rebound left

<div class="motion-preset-rebound-left">
    rebound-left
</div>

Rebound up

<div class="motion-preset-rebound-up">
    rebound-up
</div>

Rebound down

<div class="motion-preset-rebound-down">
    rebound-down
</div>

Bounce

<div class="motion-preset-bounce">
    bounce
</div>

Expand

<div class="motion-preset-expand">
    expand
</div>

Shrink

<div class="motion-preset-shrink">
    shrink
</div>

Pop

<div class="motion-preset-pop">
    pop
</div>

Compress

<div class="motion-preset-compress">
    compress
</div>

Shake

<div class="motion-preset-shake">
    shake
</div>

Wiggle

<div class="motion-preset-wiggle">
    wiggle
</div>

Confetti

<div class="motion-preset-confetti">
    confetti
</div>