Skip to main content
All of these are typed in TailMotionVars, so an inline style object autocompletes in TypeScript.

Explicit overrides

Deliberately unset at :root, so each class keeps its own tuned default. An explicit value always wins over an inherited motion profile.
Never set --tm-duration, --tm-delay, --tm-easing or --tm-iteration-count on :root. A root value shadows every per-class default in the library — that was a real bug in 0.5, and npm run check now fails the build if it comes back. Set them on an element, or use a motion profile.

Profile factors

Inherited multipliers. A motion personality sets all of these; you can also set them directly on any scope.

Shared scalars

One value each, shared by every class that uses them.
--tm-exit-distance is resolved on the element, not on :root. A custom property declared on :root is substituted there, so a calc() written at the root freezes against the root’s values and ignores a tm-distance-* utility further down the tree. Setting --tm-exit-distance explicitly still overrides the ratio.

Role easings

Classes opt into a role; a profile retunes the role.

Presence and recipes

Scroll-driven

Per-animation

Colors

See Theming and color for the full story.

View morph

The structured recipe that reshapes a container between two mounted panels.
The --tm-view-* family belongs to tm-view-morph and predates the scroll-driven module — which is why the scroll classes are named tm-scroll-* rather than tm-view-*. Two unrelated ideas behind one prefix would have been worse than a slightly longer name.