Play State

Control whether animations are running or paused

Basic Usage

Control whether animations are playing or paused using the motion-running and motion-paused utilities:

<div class="motion-preset-float hover:motion-paused">Hover to pause</div>

Hover to pause

The default play state for all animations is running if no play state modifier is specified.

Class	Value
`motion-running`	`animation-play-state: running`
`motion-paused`	`animation-play-state: paused`

Easing

Loop Count

Design animations visually in your browser.

Export directly to Rombo for Tailwind, CSS, or Framer Motion.