Angular Movement

Animate Angular with a single attribute.

Enter and leave animations for Angular 21. No boilerplate. Just HTML.

npm install @angular-movement/core

Attribute-first

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

Angular-native

Built directly on top of Angular's native animation API. No external dependencies or bloated CSS libraries. 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

Three simple steps to animate any element.

Install

Add the package via NPM or PNPM

npm install @angular-movement/core

Register

Provide it in your application config

// app.config.ts
import { provideMovement } from '@angular-movement/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMovement()
  ]
};

Animate

Add directives to your HTML templates

<div moveEnter="fade-up">
  Hello, Angular Movement!
</div>

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.

Angular's native animation API is powerful, but setting up basic enter and leave transitions requires writing separate triggers, states, transitions, and keyframes.

Angular Movement abstracts all of that away into a single, clean HTML attribute.

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/core';

@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/core

Read the docs