Scale

Basic Usage

<div class="motion-scale-in-0">
  Scale in
</div>

Scale in

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

You can scale elements along individual axes using motion-scale-x or motion-scale-y:

<div class="motion-scale-x-in-0">
  Scale X
</div>
<div class="motion-scale-y-in-0">
  Scale Y
</div>

Scale X

Scale Y

These can use the same directions as normal scale animations:

<div class="motion-scale-x-loop-150">
  Loop scale X
</div>

Loop scale X

<div class="motion-scale-out-0">
  Scale out
</div>

Scale out

<div class="motion-scale-loop-150">
  Loop scale
</div>

Loop scale

<div class="motion-scale-in-0 motion-opacity-in-0">
  Scale and fade in
</div>

Scale and fade in

<div class="motion-scale-in-0 motion-ease-spring-bouncier">
  Scale in with spring
</div>

Scale in with spring