# Angular Movement > Motion for Angular that follows your state: declarative directives on the Web Animations API, with presence, variants, scroll and signals. Angular Movement is an MIT-licensed animation library for Angular 21 and 22, published on npm as `angular-movement`. Directives such as `[move]`, `moveWhileHover`, `movePresence`, `moveVariants` and `moveScroll` run on the Web Animations API (with an optional spring engine), are SSR-safe and work without Zone.js or `@angular/animations`. - Source: https://github.com/Andersseen/angular-movement - Package: https://www.npmjs.com/package/angular-movement - Install: `npm install angular-movement` ## Documentation - [Angular Movement documentation](https://angular-movement.andersseen.dev/docs): Guides for animating Angular with directives and signals, the stability policy, and the generated API reference. - [Accessibility and troubleshooting](https://angular-movement.andersseen.dev/docs/accessibility): How Movement treats reduced motion, SSR and hydration, and what to check when an animation does not behave. - [API overview and stability](https://angular-movement.andersseen.dev/docs/api): How the API is organised, which parts are stable or experimental, and which directives read their inputs once. - [Choose an API](https://angular-movement.andersseen.dev/docs/api-selection): Several Movement APIs overlap on purpose. This page says which to pick, and which ones play once versus follow state. - [Choose the right tool](https://angular-movement.andersseen.dev/docs/choose-a-tool): 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. - [Get started](https://angular-movement.andersseen.dev/docs/get-started): Install Angular Movement, optionally configure it once, and animate your first element. - [Animate on enter and leave](https://angular-movement.andersseen.dev/docs/guides/enter): Animate an element when Angular creates it, shape the timing, and let it finish leaving before it is removed. - [Experimental: layout and drag](https://angular-movement.andersseen.dev/docs/guides/experimental): Layout transitions, drag gestures, boolean targets and smooth scrolling are experimental — what they do, and why they have dedicated playgrounds instead of embedded ones. - [Hover, tap and focus feedback](https://angular-movement.andersseen.dev/docs/guides/interactions): Give buttons, links and cards hover, press and focus feedback that behaves correctly on touch, and reveal content as it scrolls into view. - [Layout motion](https://angular-movement.andersseen.dev/docs/guides/layout): 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. - [Presence: animate things leaving](https://angular-movement.andersseen.dev/docs/guides/presence): Keep a view or a keyed list row mounted until its leave animation finishes, including nested children and rows that return mid-exit. - [Motion values and imperative animation](https://angular-movement.andersseen.dev/docs/guides/signals): Derive continuous motion from signals with moveValue, moveTransform and moveSpringValue, or animate an element you hold a reference to with MoveAnimator. - [Stagger, scroll and loops](https://angular-movement.andersseen.dev/docs/guides/stagger-and-scroll): Coordinate sibling delays by DOM order, bind motion to scroll position, and repeat a short animation. - [Reactive animation and variants](https://angular-movement.andersseen.dev/docs/guides/variants): Animate an element between states whenever a signal changes, with a single target or with named variants. - [Introduction](https://angular-movement.andersseen.dev/docs/introduction): Angular Movement is a motion library for Angular 21 and 22 — declarative directives, state-driven animation and Web Animations API playback. - [AI agent setup](https://angular-movement.andersseen.dev/docs/mcp): Give Claude Code (or any MCP-compatible agent) ground-truth access to every directive, input and preset — no more guessed selectors. - [Migrate from legacy animations](https://angular-movement.andersseen.dev/docs/migration): Assess an existing app, then migrate trigger by trigger. Some triggers convert cleanly, some need design decisions, and some should stay in CSS. - [Angular patterns](https://angular-movement.andersseen.dev/docs/patterns): 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. - [Presets](https://angular-movement.andersseen.dev/docs/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. ## Interactive demos - [Interactive demos: the Angular Movement motion lab](https://angular-movement.andersseen.dev/demos): Twenty-three interactive Angular animation playgrounds: enter, presence, variants, hover, scroll, drag and more. Tune each one and copy valid code. - [moveAnimate demo](https://angular-movement.andersseen.dev/demos/animate): Interactive playground for MoveAnimateDirective: tune the settings, replay the motion and copy valid Angular code. - [moveAnimation demo](https://angular-movement.andersseen.dev/demos/animation): Interactive playground for MoveAnimationDirective: tune the settings, replay the motion and copy valid Angular code. - [moveDrag demo](https://angular-movement.andersseen.dev/demos/drag): Interactive playground for MoveDragDirective: tune the settings, replay the motion and copy valid Angular code. - [moveEnter demo](https://angular-movement.andersseen.dev/demos/enter): Interactive playground for MoveEnterDirective: tune the settings, replay the motion and copy valid Angular code. - [moveWhileFocus demo](https://angular-movement.andersseen.dev/demos/focus): Interactive playground for MoveFocusDirective: tune the settings, replay the motion and copy valid Angular code. - [moveWhileHover demo](https://angular-movement.andersseen.dev/demos/hover): Interactive playground for MoveHoverDirective: tune the settings, replay the motion and copy valid Angular code. - [SVG Icons demo](https://angular-movement.andersseen.dev/demos/icons): Interactive playground for MovePathDraw: tune the settings, replay the motion and copy valid Angular code. - [MoveAnimator demo](https://angular-movement.andersseen.dev/demos/imperative): Interactive playground for MoveAnimator: tune the settings, replay the motion and copy valid Angular code. - [moveInView demo](https://angular-movement.andersseen.dev/demos/in-view): Interactive playground for MoveInViewDirective: tune the settings, replay the motion and copy valid Angular code. - [moveLayout demo](https://angular-movement.andersseen.dev/demos/layout): Interactive playground for MoveLayoutDirective: tune the settings, replay the motion and copy valid Angular code. - [moveLeave demo](https://angular-movement.andersseen.dev/demos/leave): Interactive playground for MoveLeaveDirective: tune the settings, replay the motion and copy valid Angular code. - [moveLoop demo](https://angular-movement.andersseen.dev/demos/loop): Interactive playground for MoveLoopDirective: tune the settings, replay the motion and copy valid Angular code. - [Parallax Effect demo](https://angular-movement.andersseen.dev/demos/parallax): Interactive playground for MoveParallaxDirective: tune the settings, replay the motion and copy valid Angular code. - [movePresence demo](https://angular-movement.andersseen.dev/demos/presence): Interactive playground for MovePresenceDirective: tune the settings, replay the motion and copy valid Angular code. - [movePresenceFor demo](https://angular-movement.andersseen.dev/demos/presence-list): Interactive playground for MovePresenceForDirective: tune the settings, replay the motion and copy valid Angular code. - [moveScroll demo](https://angular-movement.andersseen.dev/demos/scroll): Interactive playground for MoveScrollDirective: tune the settings, replay the motion and copy valid Angular code. - [moveSmoothScroll demo](https://angular-movement.andersseen.dev/demos/smooth-scroll): Interactive playground for MoveSmoothScrollDirective, SmoothScrollService: tune the settings, replay the motion and copy valid Angular code. - [moveStagger demo](https://angular-movement.andersseen.dev/demos/stagger): Interactive playground for MoveStaggerDirective: tune the settings, replay the motion and copy valid Angular code. - [moveWhileTap demo](https://angular-movement.andersseen.dev/demos/tap): Interactive playground for MoveTapDirective: tune the settings, replay the motion and copy valid Angular code. - [moveTarget demo](https://angular-movement.andersseen.dev/demos/target): Interactive playground for MoveTargetDirective, MoveTriggerDirective: tune the settings, replay the motion and copy valid Angular code. - [moveText demo](https://angular-movement.andersseen.dev/demos/text): Interactive playground for MoveTextDirective: tune the settings, replay the motion and copy valid Angular code. - [moveValue and moveTransform demo](https://angular-movement.andersseen.dev/demos/values): Interactive playground for moveTransform, moveSpringValue, moveValue: tune the settings, replay the motion and copy valid Angular code. - [moveVariants demo](https://angular-movement.andersseen.dev/demos/variants): Interactive playground for MoveVariantsDirective: tune the settings, replay the motion and copy valid Angular code. ## Site - [Angular landing page template with motion](https://angular-movement.andersseen.dev/templates): A complete Angular landing page built with Angular Movement, VoltUI components and Lumen icons: hero, feature grid, steps and call to action, animated. ## Optional - [API reference](https://angular-movement.andersseen.dev/docs/reference): 73 public symbols generated from the TypeScript declarations of the library. - [AnimationControls](https://angular-movement.andersseen.dev/docs/reference/animation-controls): The universal handle every animation returns, whether it comes from a directive internally or from MoveAnimator.animate(). - [MoveAnimateDirective](https://angular-movement.andersseen.dev/docs/reference/move-animate-directive): Plays an entrance when the element is created and, inside movePresence, a leave before it is removed — the one-attribute [move] / [moveAnimate] shorthand. - [MoveAnimateOptions](https://angular-movement.andersseen.dev/docs/reference/move-animate-options): Options for one imperative animation — the same vocabulary MoveTriggerDirective.play() takes. - [MoveAnimationConfig](https://angular-movement.andersseen.dev/docs/reference/move-animation-config): Stable API — covered by semantic-versioning guarantees. - [MoveAnimationDirective](https://angular-movement.andersseen.dev/docs/reference/move-animation-directive): Framer Motion-style state animation: give it initial, animate and optional exit states, and it animates to animate whenever the bound object changes. - [MoveAnimationTarget](https://angular-movement.andersseen.dev/docs/reference/move-animation-target): Anything MoveAnimator can animate: an element, or the ElementRef a viewChild() already gives you. - [MoveAnimator](https://angular-movement.andersseen.dev/docs/reference/move-animator): The supported way to animate from TypeScript — sequencing phases, reacting to a server response, driving a node the template does not own, View Transitions. - [MoveDragAxis](https://angular-movement.andersseen.dev/docs/reference/move-drag-axis): Experimental API — may change significantly between minor versions. - [MoveDragConstraints](https://angular-movement.andersseen.dev/docs/reference/move-drag-constraints): Experimental API — may change significantly between minor versions. - [MoveDragDirective](https://angular-movement.andersseen.dev/docs/reference/move-drag-directive): Makes the element draggable with pointer events, with optional axis lock, constraints, snap points and momentum. - [MoveDragEvent](https://angular-movement.andersseen.dev/docs/reference/move-drag-event): Experimental API — may change significantly between minor versions. - [MoveDragSnapPoint](https://angular-movement.andersseen.dev/docs/reference/move-drag-snap-point): Experimental API — may change significantly between minor versions. - [MoveEnterDirective](https://angular-movement.andersseen.dev/docs/reference/move-enter-directive): Plays a preset or keyframes once, when the element is created. - [MoveFocusDirective](https://angular-movement.andersseen.dev/docs/reference/move-focus-directive): Plays while the element has keyboard focus and reverses when focus leaves. - [MoveHoverDirective](https://angular-movement.andersseen.dev/docs/reference/move-hover-directive): Plays while a hover-capable pointer is over the element, and reverses when it leaves. - [moveIconBounce](https://angular-movement.andersseen.dev/docs/reference/move-icon-bounce): Returns keyframes for a subtle bounce animation on an icon. - [moveIconPulse](https://angular-movement.andersseen.dev/docs/reference/move-icon-pulse): Returns keyframes for a subtle pulse animation on an icon. - [moveIconRotate](https://angular-movement.andersseen.dev/docs/reference/move-icon-rotate): Returns keyframes for a subtle rotate animation on an icon. - [moveIconShake](https://angular-movement.andersseen.dev/docs/reference/move-icon-shake): Returns keyframes for a subtle shake animation on an icon. - [MoveInViewDirective](https://angular-movement.andersseen.dev/docs/reference/move-in-view-directive): Plays when the element scrolls into view, once or every time, using an IntersectionObserver. - [MoveKeyframeProperties](https://angular-movement.andersseen.dev/docs/reference/move-keyframe-properties): Stable API — covered by semantic-versioning guarantees. - [MoveKeyframeState](https://angular-movement.andersseen.dev/docs/reference/move-keyframe-state): Stable API — covered by semantic-versioning guarantees. - [MoveKeyframes](https://angular-movement.andersseen.dev/docs/reference/move-keyframes): Stable API — covered by semantic-versioning guarantees. - [MoveLayoutDirective](https://angular-movement.andersseen.dev/docs/reference/move-layout-directive): Animates the element from its previous position and size to its new layout (FLIP), including shared-element transitions by moveLayoutId. - [MoveLeaveDirective](https://angular-movement.andersseen.dev/docs/reference/move-leave-directive): Plays a preset or keyframes before the element is removed; inside movePresence the view waits for it to finish. - [MoveLoopDirective](https://angular-movement.andersseen.dev/docs/reference/move-loop-directive): Repeats a preset or keyframes — endlessly or a set number of times, restarting or reversing each cycle. - [MoveParallaxDirective](https://angular-movement.andersseen.dev/docs/reference/move-parallax-directive): Moves the element at a different speed from the scroll, deriving the travel from its size and the viewport. - [movePathDraw](https://angular-movement.andersseen.dev/docs/reference/move-path-draw): Returns keyframes for a path-drawing animation. - [MovePresenceDirective](https://angular-movement.andersseen.dev/docs/reference/move-presence-directive): Structural directive that keeps its view mounted until every registered leave animation inside it has finished. - [MovePresenceForContext](https://angular-movement.andersseen.dev/docs/reference/move-presence-for-context): Stable API — covered by semantic-versioning guarantees. - [MovePresenceForDirective](https://angular-movement.andersseen.dev/docs/reference/move-presence-for-directive): Keyed-list counterpart to movePresence. - [MovePresenceForMode](https://angular-movement.andersseen.dev/docs/reference/move-presence-for-mode): 'sync' — entering and leaving items animate at the same time. - [MovePresenceForTrackBy](https://angular-movement.andersseen.dev/docs/reference/move-presence-for-track-by): Stable API — covered by semantic-versioning guarantees. - [MovePreset](https://angular-movement.andersseen.dev/docs/reference/move-preset): Named animation presets. - [MovePresetDefinition](https://angular-movement.andersseen.dev/docs/reference/move-preset-definition): Stable API — covered by semantic-versioning guarantees. - [MOVE_PRESETS](https://angular-movement.andersseen.dev/docs/reference/move-presets): Constant reference for MOVE_PRESETS. - [MovePropertyTransition](https://angular-movement.andersseen.dev/docs/reference/move-property-transition): Stable API — covered by semantic-versioning guarantees. - [MoveRepeatOptions](https://angular-movement.andersseen.dev/docs/reference/move-repeat-options): Stable API — covered by semantic-versioning guarantees. - [MoveRepeatType](https://angular-movement.andersseen.dev/docs/reference/move-repeat-type): 'loop' restarts from the first keyframe each cycle. - [MoveScrollDirective](https://angular-movement.andersseen.dev/docs/reference/move-scroll-directive): Scrubs keyframes with scroll position between two offsets, and exposes the progress as a signal. - [MoveSmoothScrollDirective](https://angular-movement.andersseen.dev/docs/reference/move-smooth-scroll-directive): Directive that enables smooth scrolling on a specific scrollable container. - [MoveSpring](https://angular-movement.andersseen.dev/docs/reference/move-spring): Stable API — covered by semantic-versioning guarantees. - [moveSpringValue](https://angular-movement.andersseen.dev/docs/reference/move-spring-value): Creates a signal that follows a source signal with spring physics, for values that should settle instead of jump. - [MoveSpringValueConfig](https://angular-movement.andersseen.dev/docs/reference/move-spring-value-config): Stable API — covered by semantic-versioning guarantees. - [MoveStaggerDirection](https://angular-movement.andersseen.dev/docs/reference/move-stagger-direction): Stable API — covered by semantic-versioning guarantees. - [MoveStaggerDirective](https://angular-movement.andersseen.dev/docs/reference/move-stagger-directive): Gives each animated child a delay from its DOM order, from the first, last or centre child, so lists cascade without index bookkeeping. - [MoveStateValue](https://angular-movement.andersseen.dev/docs/reference/move-state-value): Stable API — covered by semantic-versioning guarantees. - [MoveTapDirective](https://angular-movement.andersseen.dev/docs/reference/move-tap-directive): 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. - [MoveTargetDirective](https://angular-movement.andersseen.dev/docs/reference/move-target-directive): Plays keyframes or a preset on its host when the bound boolean turns true, and plays them in reverse when it turns false. - [MoveTextDirective](https://angular-movement.andersseen.dev/docs/reference/move-text-directive): Splits the host's text content into animated spans/words. - [MoveTime](https://angular-movement.andersseen.dev/docs/reference/move-time): A duration or delay. - [moveTimeToMs](https://angular-movement.andersseen.dev/docs/reference/move-time-to-ms): Converts a MoveTime to milliseconds: moveTimeToMs('0.08s') === 80, moveTimeToMs(80) === 80. - [moveTransform](https://angular-movement.andersseen.dev/docs/reference/move-transform): Derives a signal by mapping another signal's value from one range onto another (clamped by default), like Framer Motion's useTransform. - [MoveTransformOptions](https://angular-movement.andersseen.dev/docs/reference/move-transform-options): Stable API — covered by semantic-versioning guarantees. - [MoveTransformValue](https://angular-movement.andersseen.dev/docs/reference/move-transform-value): Stable API — covered by semantic-versioning guarantees. - [MoveTransitionConfig](https://angular-movement.andersseen.dev/docs/reference/move-transition-config): Stable API — covered by semantic-versioning guarantees. - [MoveTriggerDirective](https://angular-movement.andersseen.dev/docs/reference/move-trigger-directive): Plays keyframes on its host when a boolean flips to true, and resets when it flips back — the declarative trigger side of moveTarget/moveTrigger. - [MoveValue](https://angular-movement.andersseen.dev/docs/reference/move-value): Stable API — covered by semantic-versioning guarantees. - [moveValue](https://angular-movement.andersseen.dev/docs/reference/move-value-function): Creates a writable signal meant to drive motion, to bind into animation inputs or derive with moveTransform. - [MoveValuePair](https://angular-movement.andersseen.dev/docs/reference/move-value-pair): Stable API — covered by semantic-versioning guarantees. - [MoveVariant](https://angular-movement.andersseen.dev/docs/reference/move-variant): Stable API — covered by semantic-versioning guarantees. - [MoveVariantOrchestration](https://angular-movement.andersseen.dev/docs/reference/move-variant-orchestration): 'beforeChildren' plays the parent first and offsets its children by the parent's duration. - [MoveVariantState](https://angular-movement.andersseen.dev/docs/reference/move-variant-state): Stable API — covered by semantic-versioning guarantees. - [MoveVariantsDirective](https://angular-movement.andersseen.dev/docs/reference/move-variants-directive): Animates between named states: bind moveVariant to a signal and the element animates whenever the name changes. - [MOVEMENT_CONFIG](https://angular-movement.andersseen.dev/docs/reference/movement-config): Injection token for the resolved library-wide defaults; override them with provideMovement(config). - [MovementConfigInput](https://angular-movement.andersseen.dev/docs/reference/movement-config-input): What provideMovement() accepts: any subset of MovementConfig, with duration and delay taking a MoveTime (320, '320ms', '0.32s'). - [MovementConfig](https://angular-movement.andersseen.dev/docs/reference/movement-config-interface): The resolved, library-wide animation defaults — what MOVEMENT_CONFIG injects. - [MOVEMENT_DEFAULTS](https://angular-movement.andersseen.dev/docs/reference/movement-defaults): The built-in timing defaults (duration, easing, delay) used when nothing is configured. - [MOVEMENT_DIRECTIVES](https://angular-movement.andersseen.dev/docs/reference/movement-directives): All directives the library ships (every MOVEMENT_STABLE_DIRECTIVES plus every MOVEMENT_EXPERIMENTAL_DIRECTIVES member), ready to spread into a standalone compo… - [MOVEMENT_EXPERIMENTAL_DIRECTIVES](https://angular-movement.andersseen.dev/docs/reference/movement-experimental-directives): Every experimental directive — may change or be removed in any 1.x minor. - [MOVEMENT_STABLE_DIRECTIVES](https://angular-movement.andersseen.dev/docs/reference/movement-stable-directives): Every stable directive — none of these change behavior or shape outside a major version. - [provideMovement](https://angular-movement.andersseen.dev/docs/reference/provide-movement): Sets library-wide animation defaults. - [SmoothScrollService](https://angular-movement.andersseen.dev/docs/reference/smooth-scroll-service): SmoothScrollService — Lenis-inspired smooth scroll for Angular.