Angular Movement

Animate Angular with a single attribute.

Motion-style states, presence, SVG drawing, drag, scroll, and layout primitives for Angular 21. No animation boilerplate.

Get Started → View on GitHub

npm install angular-movement

Attribute-first

Add animations with a single HTML attribute. No TypeScript setup, triggers, or state boilerplate required.

Angular-native

Angular template APIs powered by the browser Web Animations API. No @angular/animations setup, no CSS animation boilerplate, and zero Zone.js requirements.

Accessible defaults

Automatically respects user device preferences. Safe for all users out of the box with prefers-reduced-motion.

How it works

Angular directives in your template, WAAPI timelines in the browser, final styles committed for you.

Declare

Add motion directly to Angular templates with directives and signals.

<article
  moveEnter="fade-up"
  [moveWhileHover]="{ scale: [1, 1.03] }"
>
  Product card
</article>

Compose

Movement resolves presets, variants, transforms, SVG paths, and timing.

const variants = {
  idle: { opacity: 0.7, y: 0 },
  active: { opacity: 1, y: -8 },
  exit: { opacity: 0, scale: 0.96 }
};

Commit

WAAPI plays the timeline and the engine writes final styles safely.

// Angular-native API
// Web Animations API runtime
// Final transform, opacity, and SVG styles preserved

Presets showcase

Click any card to select and replay its native enter animation

Select a preset to view code

Copy and drop this directive into any native Angular component.

my-component.html

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

Say goodbye to boilerplate.

Traditional Angular animation setup is powerful, but basic enter and leave transitions can still require separate triggers, states, transitions, and keyframes.

Angular Movement keeps the Angular template ergonomics and plays animations through the browser Web Animations API.

Native Angular

Angular Movement

app.component.ts

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'my-component',
  template: `<div @fadeUp *ngIf="show">Content</div>`,
  animations: [
    trigger('fadeUp', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(20px)' }),
        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ])
  ]
})
export class MyComponent {
  show = true;
}

app.component.ts

import { Component } from '@angular/core';
import { MOVEMENT_DIRECTIVES } from 'angular-movement';

@Component({
  selector: 'my-component',
  imports: [...MOVEMENT_DIRECTIVES],
  template: `
    @if (show) {
      <div moveEnter="fade-up">Content</div>
    }
  `
})
export class MyComponent {
  show = true;
}

Cleaner

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