Start here

Get started

Install Angular Movement, optionally configure it once, and animate your first element.

Angular Movement supports Angular ^21.2.0 || ^22.0.0 and works with standalone components, zoneless change detection and server rendering.

1. Install the package

pnpm add angular-movement

npm install angular-movement

yarn add angular-movement

2. Optionally register the provider

The defaults are fine for most apps. Use provideMovement to override durations or easings once, for the whole application. Numbers are milliseconds.

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideMovement({
      duration: '300ms', // or 300: numbers are milliseconds
      easing: 'ease-out',
    }),
    // prefers-reduced-motion is honoured automatically, no config needed.
  ],
};

View source

3. Import the directive each component uses

Every directive is standalone, so there is nothing else to register. MoveEnterDirective is the one used here. Everything is imported from angular-movement:

imports

import { MoveEnterDirective, provideMovement } from 'angular-movement';

View source

welcome.ts

@Component({
  selector: 'app-welcome',
  imports: [MoveEnterDirective],
  template: `<h1 moveEnter="fade-up">Welcome back</h1>`,
})
export class Welcome {}

View source

Note

That is the whole setup: no triggers to declare and no state to manage. The element animates when Angular creates it.

Try it

Change the settings of the real moveEnter directive. Because moveEnter plays once when its element is created, each change recreates the element so you can watch the new settings play.

moveEnter

The real directive. moveEnter plays once when the element is created, so each change recreates the element to replay it.

fade-up

entered 1×

Inputs

Preset

Duration (ms)

Delay (ms)

Easing

Disabled

Events

No events yet. Interact with the preview to see them here.

Template

<div
  moveEnter="fade-up"
  [moveDuration]="500"
  [moveDelay]="0"
  moveEasing="ease-out"
>Content</div>

Next steps

Animate on enter and leave explains lifecycle, timing and presence for exits.
Choose an API separates the one-shot directives from the reactive ones.
Accessibility and troubleshooting covers reduced motion, SSR and the usual surprises.
Prefer a hands-on tour? Open the full moveEnter playground.