Skip to main content

​
Requirements

  • Any bundler, or none. The prebuilt stylesheet is plain CSS.
  • Tailwind CSS v3 or v4 for the appearance around the motion — optional, but TailMotion is designed to sit next to it.
  • Node 16+ only if you install from npm.
TailMotion ships no JavaScript in its CSS core. Nothing on this page installs a runtime, an animation library, or a React component.

​
1. Install

​
2. Import the stylesheet

Or from JavaScript, which is what most bundlers want:
That single entry is the whole library: every animation, the motion profiles, presence, native-element motion, recipes, choreography, scroll, and a curated set of prebuilt variant selectors. It needs no Tailwind setup and no plugin. For a smaller stylesheet, take module entries instead.

​
3. Add motion to something

tm-press is a transition, so releasing early reverses smoothly instead of snapping. tm-slide-block-start is a keyframe entrance that travels toward the block-start edge — the name says the direction, and it mirrors itself in right-to-left contexts.

​
4. Give the whole surface a personality

One class on an ancestor retunes every TailMotion descendant. Nothing below it changes.
Duration is a factor, not a value, so each animation keeps its own relative character — tm-pop stays livelier than tm-fade-in in all three. Full detail in Motion personalities.

​
5. Animate the state you already have

If your component knows whether the menu is open, TailMotion can read that directly. No second source of truth, no runtime.
Toggle data-state between "open" and "closed" and the panel animates both ways. aria-expanded, aria-pressed, aria-checked and .tm-open / .tm-closed all work too.
A closed element has to stay in the DOM until its closed transition finishes, or there is nothing left to animate. TailMotion ships no JavaScript to mount or unmount anything — see the mounting contract.

​
6. Animate a native element

[popover], <dialog> and <details> are the three elements the browser already handles correctly, and the three that were historically impossible to animate out. Modern CSS fixed that.
The browser keeps focus management, the top layer, light dismiss and Escape. TailMotion adds the movement and picks no color, size, padding, radius or shadow. See Native elements for exactly what each browser supports and what happens without it.

​
7. Sequence a list

Switch data-state to "closed" and the list leaves in sequence. Add tm-stagger-from-end and it leaves last-item-first, with nothing reordered in the DOM. See Choreography.

​
What you did not have to do

  • Install an animation runtime.
  • Write an @keyframes block.
  • Fork a component to change a duration.
  • Add an IntersectionObserver.
  • Write a prefers-reduced-motion media query.
  • Write a right-to-left variant.

​
Next

Installation options

Tailwind v3, Tailwind v4, the CDN, and the optional plugin.

The motion model

How the four token groups compose, and which class to reach for.