Angular Movement · v1.x

Motion for Angular that follows your state.

Declarative directives on top of the Web Animations API. Start with one attribute; reach for presence, variants, scroll, springs and signals when the interface needs coordinated motion. Built for standalone, zoneless and SSR Angular.

Get started Explore demos

npm install angular-movement

Today

An interactive task list: add, complete, expand and remove tasks.

Built only from stable APIs: *movePresenceFor, *movePresence, [moveAnimation], moveWhileHover, moveWhileTap. Honours prefers-reduced-motion.

Show the code

tasks.component.tsts

import { Component, signal } from '@angular/core';
import {
  MoveAnimationDirective,
  MoveEnterDirective,
  MoveLeaveDirective,
  MoveHoverDirective,
  MovePresenceDirective,
  MovePresenceForDirective,
} from 'angular-movement';

@Component({
  selector: 'app-tasks',
  imports: [
    MovePresenceForDirective,
    MovePresenceDirective,
    MoveAnimationDirective,
    MoveEnterDirective,
    MoveLeaveDirective,
    MoveHoverDirective,
  ],
  template: `
    <ul>
      <li
        *movePresenceFor="let task of tasks(); trackBy: byId"
        [moveWhileHover]="{ y: [0, -2] }"
      >
        <div
          [moveAnimation]="{
            initial: { scale: 1 },
            animate: { scale: task.done ? 0.985 : 1 },
            duration: 200
          }"
        >
          {{ task.title }}
        </div>

        <ng-container *movePresence="task.open">
          <p moveEnter="fade-down" moveLeave="fade-up">Details</p>
        </ng-container>
      </li>
    </ul>
  `,
})
export class Tasks {
  tasks = signal([{ id: 1, title: 'Review PR', done: false, open: false }]);
  byId = (_: number, task: { id: number }) => task.id;
}

Why Angular Movement

Angular already animates simple enter and leave. Movement exists for the part that is hard to coordinate by hand: motion that is driven by application state.

Signals in, motion out

Bind an object or a signal and the element animates to the new state. moveValue, moveTransform and moveSpringValue derive motion from signals without a change-detection detour.

Native browser animation

Playback runs on the Web Animations API, so transforms and opacity stay on the compositor where the browser allows it. Final styles are committed, not left in a fill. No animation runtime to ship.

Presence that owns lifetime

movePresence and movePresenceFor keep an element mounted until every leave animation has finished, including keyed lists that are reordered or revived mid-exit.

Not sure whether you need it? Read when CSS or Angular's native animations are enough.

Use the simplest tool that works

Movement is not a replacement for CSS or for Angular's own animate.enter / animate.leave. It adds value when motion has to react to state and be coordinated.

CSS

Hover colours, simple transitions, loaders

Zero JavaScript, runs before hydration
Best for state that already lives in a class or pseudo-class
No coordination with element lifetime

animate.enter / animate.leave

Enter and leave of elements, Angular 20.2+

Built into Angular, nothing to install
Applies CSS classes while a node enters or leaves
Ideal when each element has its own self-contained enter/leave

Angular Movement

Motion driven by state and coordinated across elements

Reactive state-to-state transitions, variants and stagger
Keyed-list presence, springs, scroll-linked and SVG motion
Signals-based values, imperative MoveAnimator, SSR-safe

Raw WAAPI

One-off, fully custom effects

element.animate() directly, maximal control
You own cancellation, reduced motion and cleanup
Fine for a single isolated effect

Select a preset to view code

Copy and drop this directive into any native Angular component.

my-component.htmlhtml

<!-- Just add the moveEnter directive -->
<div 
  moveEnter="fade-up"
  [moveDuration]="500"
>
  Hello Movement!
</div>

Ready to move?

Drop the boilerplate. Start animating your Angular 21 applications in minutes with a single import.

npm install angular-movement

Read the docs