Angular Movement documentation

Angular Movement is a motion library for Angular 21 and 22 — declarative directives, state-driven animation and Web Animations API playback.

Install Angular Movement, optionally configure it once, and animate your first element.

CSS, Angular's native animate.enter and animate.leave, Angular Movement and raw WAAPI all have a place. Use the simplest one that does the job.

Animate an element when Angular creates it, shape the timing, and let it finish leaving before it is removed.

Give buttons, links and cards hover, press and focus feedback that behaves correctly on touch, and reveal content as it scrolls into view.

Animate an element between states whenever a signal changes, with a single target or with named variants.

Keep a view or a keyed list row mounted until its leave animation finishes, including nested children and rows that return mid-exit.

Coordinate sibling delays by DOM order, bind motion to scroll position, and repeat a short animation.

Derive continuous motion from signals with moveValue, moveTransform and moveSpringValue, or animate an element you hold a reference to with MoveAnimator.

Layout transitions, drag gestures, boolean targets and smooth scrolling are experimental — what they do, and why they have dedicated playgrounds instead of embedded ones.

Animate reflow, resizing and shared-element handovers from application state — what the experimental moveLayout contract guarantees, what it measures, and what it does not support.

Several Movement APIs overlap on purpose. This page says which to pick, and which ones play once versus follow state.

How the API is organised, which parts are stable or experimental, and which directives read their inputs once.

The patterns real apps reach for most — hover and press feedback, reveal-on-scroll, staggered lists, imperative animation — and how Movement behaves alongside the Angular features you already use.

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

How Movement treats reduced motion, SSR and hydration, and what to check when an animation does not behave.

Assess an existing app, then migrate trigger by trigger. Some triggers convert cleanly, some need design decisions, and some should stay in CSS.

Give Claude Code (or any MCP-compatible agent) ground-truth access to every directive, input and preset — no more guessed selectors.

73 public symbols generated from the TypeScript declarations of the library.

Plays an entrance when the element is created and, inside movePresence, a leave before it is removed — the one-attribute [move] / [moveAnimate] shorthand.

Framer Motion-style state animation: give it initial, animate and optional exit states, and it animates to animate whenever the bound object changes.

Makes the element draggable with pointer events, with optional axis lock, constraints, snap points and momentum.

Plays a preset or keyframes once, when the element is created.

Plays while the element has keyboard focus and reverses when focus leaves.

Plays while a hover-capable pointer is over the element, and reverses when it leaves.

Plays when the element scrolls into view, once or every time, using an IntersectionObserver.

Animates the element from its previous position and size to its new layout (FLIP), including shared-element transitions by moveLayoutId.

Plays a preset or keyframes before the element is removed; inside movePresence the view waits for it to finish.

Repeats a preset or keyframes — endlessly or a set number of times, restarting or reversing each cycle.

Moves the element at a different speed from the scroll, deriving the travel from its size and the viewport.

Structural directive that keeps its view mounted until every registered leave animation inside it has finished.

Keyed-list counterpart to movePresence.

Scrubs keyframes with scroll position between two offsets, and exposes the progress as a signal.

Directive that enables smooth scrolling on a specific scrollable container.

Gives each animated child a delay from its DOM order, from the first, last or centre child, so lists cascade without index bookkeeping.

Plays while the element is pressed with a pointer and reverses on release — press feedback that also works on touch, where there is no hover.

Plays keyframes or a preset on its host when the bound boolean turns true, and plays them in reverse when it turns false.

Splits the host's text content into animated spans/words.

Plays keyframes on its host when a boolean flips to true, and resets when it flips back — the declarative trigger side of moveTarget/moveTrigger.

Animates between named states: bind moveVariant to a signal and the element animates whenever the name changes.

The supported way to animate from TypeScript — sequencing phases, reacting to a server response, driving a node the template does not own, View Transitions.

SmoothScrollService — Lenis-inspired smooth scroll for Angular.

Returns keyframes for a subtle bounce animation on an icon.

Returns keyframes for a subtle pulse animation on an icon.

Returns keyframes for a subtle rotate animation on an icon.

Returns keyframes for a subtle shake animation on an icon.

Returns keyframes for a path-drawing animation.

Creates a signal that follows a source signal with spring physics, for values that should settle instead of jump.

Converts a MoveTime to milliseconds: moveTimeToMs('0.08s') === 80, moveTimeToMs(80) === 80.

Derives a signal by mapping another signal's value from one range onto another (clamped by default), like Framer Motion's useTransform.

Creates a writable signal meant to drive motion, to bind into animation inputs or derive with moveTransform.

Sets library-wide animation defaults.

The universal handle every animation returns, whether it comes from a directive internally or from MoveAnimator.animate().

Options for one imperative animation — the same vocabulary MoveTriggerDirective.play() takes.

Stable API — covered by semantic-versioning guarantees.

Experimental API — may change significantly between minor versions.

Experimental API — may change significantly between minor versions.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

The resolved, library-wide animation defaults — what MOVEMENT_CONFIG injects.

Anything MoveAnimator can animate: an element, or the ElementRef a viewChild() already gives you.

Experimental API — may change significantly between minor versions.

Experimental API — may change significantly between minor versions.

Stable API — covered by semantic-versioning guarantees.

'sync' — entering and leaving items animate at the same time.

Stable API — covered by semantic-versioning guarantees.

Named animation presets.

'loop' restarts from the first keyframe each cycle.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

A duration or delay.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

Stable API — covered by semantic-versioning guarantees.

'beforeChildren' plays the parent first and offsets its children by the parent's duration.

Stable API — covered by semantic-versioning guarantees.

What provideMovement() accepts: any subset of MovementConfig, with duration and delay taking a MoveTime (320, '320ms', '0.32s').

Injection token for the resolved library-wide defaults; override them with provideMovement(config).

The built-in timing defaults (duration, easing, delay) used when nothing is configured.

All directives the library ships (every MOVEMENT_STABLE_DIRECTIVES plus every MOVEMENT_EXPERIMENTAL_DIRECTIVES member), ready to spread into a standalone compo…

Every experimental directive — may change or be removed in any 1.x minor.

Every stable directive — none of these change behavior or shape outside a major version.

Constant reference for MOVE_PRESETS.