MoveAnimator

Learn more

Animate, set and clear from TypeScript. Try a View Transition reveal or sequence a declarative trigger handle.

animate / set / clear

Order confirmed

View Transition reveal

Daylight

last run: idle

moveTrigger · experimental

Controls Make it yours

Animate the order card, commit a state instantly, or clear it.

Reveal and flash actions live beside their targets. Each source tab shows its corresponding API.

checkout.tsts

import { Component, DestroyRef, ElementRef, inject, viewChild } from '@angular/core';
import { AnimationControls, MoveAnimator } from 'angular-movement';

@Component({
  selector: 'app-checkout',
  template: `
    <button (click)="pulse()">animate()</button>
    <button (click)="dim()">set()</button>
    <button (click)="reset()">clear()</button>
    <div #card>Order confirmed</div>
  `,
})
export class Checkout {
  readonly #animator = inject(MoveAnimator);
  readonly card = viewChild.required<ElementRef<HTMLElement>>('card');
  #player: AnimationControls | null = null;
  constructor() { inject(DestroyRef).onDestroy(() => this.#player?.cancel()); }
  pulse() {
    this.#player?.cancel();
    this.#player = this.#animator.animate(this.card(), { scale: [1, 1.06, 1] }, { duration: '240ms' });
  }
  dim() { this.#animator.set(this.card(), { opacity: 0.6, y: 8 }); }
  reset() { this.#animator.clear(this.card()); }
}