Skip to content

Signal values

When motion should come from your own state rather than a lifecycle event, drive it with signals. moveValue holds a number, moveTransform maps it onto any output range, and moveSpringValue smooths it with spring physics — all plain signals, so they compose with computed and work under zoneless change detection.

moveTransform — follows the slider exactly
moveSpringValue — same input, settles with physics
progress
0
x
0.0px
springX
0.0px
rotate
0deg
values.component.tsts
import { Component, inject, Injector } from '@angular/core';
import { moveValue, moveTransform, moveSpringValue } from 'angular-movement';

@Component({ /* ... */ })
export class Demo {
  readonly #injector = inject(Injector);

  // 1. A driver signal — anything that produces a number works.
  readonly progress = moveValue(0);

  // 2. Map that number onto whatever the UI needs.
  readonly x       = moveTransform(this.progress, [0, 100], [0, 260]);
  readonly rotate  = moveTransform(this.progress, [0, 100], ['0deg', '360deg']);
  readonly hue     = moveTransform(this.progress, [0, 50, 100], [0.4, 1, 0.4]);

  // 3. Let a spring smooth the raw value instead of following it rigidly.
  readonly springX = moveSpringValue(this.x, {
    stiffness: 170,
    damping: 18,
    injector: this.#injector, // required: moveSpringValue creates an effect
  });
}