Loop Animation Presets

Rombo for Tailwind provides a collection of ready-made loop animation presets that combine multiple animation properties into single, easy-to-use classes. Below is a complete list of available loop animation presets:

Pulse

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

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

Wobble

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

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

Seesaw

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

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

Oscillate

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

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

Stretch

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

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

Float

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

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

Spin

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

Blink

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

Typewriter

Enter the number of characters you want to animate in the square brackets.

<div class="motion-preset-typewriter-[10]">
    typewriter
</div>

Flomoji

<div class="motion-preset-flomoji-[🚀]">
    flomoji-[🚀]
</div>