Grayscale

Basic Usage

<div class="motion-grayscale-in">
  Fade to grayscale
</div>

Fade from grayscale

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

<div class="motion-grayscale-loop-100">
  Loop grayscale effect
</div>

Loop grayscale effect

<div class="motion-grayscale-out">
  Exit to grayscale
</div>

Exit to grayscale

<div class="motion-grayscale-in motion-blur-in-md">
  Grayscale and blur
</div>

Grayscale and blur

<div class="motion-grayscale-in motion-duration-[5s]">
  Slow grayscale transition
</div>

Slow grayscale transition