Modifiers

You can customize the duration, delay, timing function, and play state of any animation.

• Duration: motion-duration-500
• Delay: motion-delay-500
• Timing Function: motion-timing-spring-bouncy
• Play State: motion-paused or motion-running

For example:

<div
  class="motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0"
></div>

This applies a duration of 2000ms to both the rotation and opacity animations.

Animation Play State

You can pause and resume animations using the play state utilities:

<!-- Pause the animation -->
<div class="motion-preset-bounce motion-paused"></div>
 
<!-- Resume the animation -->
<div class="motion-preset-bounce motion-running"></div>

Modifiers for each property

You can apply modifiers to specific properties using a slash /.

For example:

<div
  class="motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0"
></div>

Here, the delay of 500ms is applied only to the rotation, not the opacity.

Ease Functions

The plugin includes custom timing functions:

a few examples are:

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

Loop Modifiers

Loops support two animation styles controlled by modifiers:

• mirror (default): Animation reverses direction when reaching the end
• reset: Animation resets to starting position when reaching the end

<!-- Mirror animation (default) -->
<div class="motion-translate-y-loop-25/mirror"></div>
 
<!-- Reset animation -->
<div class="motion-translate-y-loop-25/reset"></div>

Loop Count

Control how many times the animation repeats using the motion-loop utility:

• motion-loop-once: Animation repeats once
• motion-loop-twice: Animation repeats twice
• motion-loop-infinite: Animation repeats indefinitely (default)

<!-- Infinite loop (default) -->
<div class="motion-translate-y-loop-25"></div>
 
<!-- Loop twice -->
<div class="motion-translate-y-loop-25 motion-loop-twice"></div>
 
<!-- Loop once -->
<div class="motion-translate-y-loop-25 motion-loop-once"></div>