Angular Movement

Animate Angular with a single attribute.

Declarative, signals-native motion for Angular 21 and 22 — presets, variants, gestures, spring physics, drag, scroll-linked animation, layout transitions, presence orchestration, motion values & SVG path-drawing. SSR-safe, zoneless-ready. Zero @angular/animations.

---

Why Angular Movement?

UI animation in Angular tends to sprawl: enter/leave transitions rewritten per component, imperative logic tangled into templates, inconsistent timings across a team, and no clean way to orchestrate staggered lists or exit animations.

Angular Movement replaces that boilerplate with declarative directives and one global config, so motion stays consistent, composable, and SSR-safe. Playback runs on the browser's native Web Animations API (with an optional spring physics engine) — no @angular/animations setup required.

<h2 [move]="'fade-up'">Hello movement</h2>
<button [moveWhileHover]="{ scale: [1, 1.05] }">Hover me</button>

✨ Features

🎬 30+ presets	fade, slide, zoom, flip, blur, bounce, pulse, spin, icon-draw/pulse/bounce
🧬 Custom keyframes	full control when a preset isn't enough; repeat / repeatType / repeatDelay
🍃 Spring physics	pre-computed spring keyframes via a dedicated engine
🖱️ Interactions	hover, tap, focus, in-view, scroll, parallax, drag
🎯 Advanced drag	axis-lock, constraints, elasticity, momentum, snap points & moveWhileDrag
👻 Presence	leave animations finish before removal — for a single view or a keyed list
🪜 Stagger	ordered list motion, plus staggerChildren orchestration inside variants
✍️ SVG path drawing	animate pathLength / pathOffset, WAAPI-powered
⏱️ Per-property transitions	different duration, delay and easing per property; explicit keyframe times
🔀 Motion values	derive motion from Angular signals (moveValue, moveTransform, moveSpringValue)
🖥️ SSR-safe	every browser API guarded; no-ops on the server
🧱 Standalone-ready	tree-shakeable directives, no NgModule required

🚀 Quick start

npm install angular-movement
# or: pnpm add angular-movement · yarn add angular-movement

Peer dependencies: @angular/core and @angular/common — ^21.2.0 || ^22.0.0. Every supported major is compiled against the packed package in CI (pnpm validate:consumer).

1. Provide global defaults (optional)

import { ApplicationConfig } from '@angular/core';
import { provideMovement } from 'angular-movement';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMovement({
      duration: '320ms', // or 320 — numbers are milliseconds
      easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
    }),
  ],
};

prefers-reduced-motion is honoured automatically — there is nothing to configure for it. disabled is an app-level kill switch (a user setting, screenshot tests), not the reduced-motion mechanism, and SSR needs nothing either: every directive is a no-op on the server.

2. Import only the directives you use

Standalone components tree-shake per route, but only if you import what you actually use — a directive that's never imported anywhere never ships.

import { Component } from '@angular/core';
import { MoveAnimateDirective, MoveHoverDirective, MoveTapDirective } from 'angular-movement';

@Component({
  selector: 'app-demo-card',
  imports: [MoveAnimateDirective, MoveHoverDirective, MoveTapDirective],
  template: `
    <h2 move="fade-up">Hello movement</h2>
    <button moveWhileHover="lift" moveWhileTap="press">Hover or press me</button>
  `,
})
export class DemoCardComponent {}

以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗