Skip to content
Documentation/Presets

Search documentation

Type to search the documentation.

Concepts

Presets

Named animations for common product UI moments. Use them when the desired motion is already known and you do not need custom state logic.

Where presets fit

Entrance presets work with moveEnter, moveLeave, [move], moveInView and staggered children. The two interaction presets, lift and press, are for moveWhileHover and moveWhileTap. They are the fastest way to add consistent motion to empty states, cards, menus, alerts, SVG icons and list reveals.

  • Use for simple moments. Choose a preset when the element only needs an entrance, exit or reveal.
  • Keep timing local. Tune moveDuration, moveDelay, moveEasing or moveSpring without changing the preset.
  • Graduate when state matters. Move to variants, presence, drag, scroll or layout when behaviour gets richer.

Every preset below is the real directive, rendered live. Replay any preview to watch it again; reduced motion shows the end state.

Live preview of every preset loads as this section scrolls into view.

Product UI reveals

Use these for cards, panels, empty states, menus and list items.

<article moveEnter="fade-up">Billing summary</article>

<aside moveEnter="slide-up" moveLeave="slide-down">Filters</aside>

<span moveEnter="zoom-in" moveDuration="300ms">Saved</span>

Interaction

lift is a 4px rise for cards, buttons and links — mouse and pen only, because touch has no hover. press is a 3% scale-down while pressed, the touch feedback for anything tappable. They write different style channels, so they compose on one element.

<a moveWhileHover="lift" moveWhileTap="press">Pricing</a>

Feedback and attention

Use these sparingly, for validation, loading and meaningful emphasis.

<div moveEnter="pulse" moveDuration="900ms">Syncing</div>

<input moveEnter="shake" aria-invalid="true" />

<strong moveEnter="tada">Workspace ready</strong>

SVG icons

Use these for checkmarks, route lines, progress strokes and product icons. icon-draw reveals the actual SVG stroke instead of faking it with opacity.

<path moveEnter="icon-draw" d="M14 25.5 21 32l14-17" stroke="currentColor" />

<svg moveEnter="icon-pulse"><path d="..." /></svg>

When to avoid a preset

If the element has named states, use moveVariants. If Angular should keep a removed view alive while it exits, wrap it in movePresence. If the pointer, layout or scroll position drives the behaviour, use moveDrag, moveLayout, moveScroll or moveParallax. The complete preset type is MovePreset.