Translation

Basic Usage

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

Slide up

These are the theme default values. You can customize the theme to add your own values to the motionTranslate property or use arbitrary values.

Translation animations support both X and Y axes:

<div class="motion-translate-x-in-100">
  Slide in from right
</div>
<div class="motion-translate-y-in-100">
  Slide up
</div>

Slide in from right

Slide up

<div class="motion-translate-x-loop-50 motion-translate-y-loop-25">
  Loop horizontally and vertically
</div>

Loop horizontally and vertically

<div class="motion-translate-y-out-100">
  Slide out downward
</div>

Slide out downward

<div class="motion-translate-y-in-100 motion-opacity-in-0">
  Slide up and fade in
</div>

Slide up and fade in

<div class="motion-translate-y-in-100 motion-ease-bounce">
  Bounce in from below
</div>

Bounce in from below