Signal values

Learn more

Drive motion with moveValue, map it with moveTransform, and smooth it with moveSpringValue. Compare direct state with spring response.

moveTransform — follows the slider exactly

moveSpringValue — same input, settles with physics

progress: 0
x: 0.0px
springX: 0.0px
rotate: 0deg

Controls Make it yours

progress — moveValue(0)0

values.component.tsts

import { Component, computed, inject, Injector } from '@angular/core';
import { moveValue, moveTransform, moveSpringValue } from 'angular-movement';

@Component({
  selector: 'app-values',
  template: `
    <label>Progress
      <input type="range" min="0" max="100" [value]="progress()"
        (input)="progress.set(+$any($event.target).value)" />
    </label>
    <div style="height: 64px; position: relative">
      <div [style.transform]="linearTransform()" [style.opacity]="fade()"
        style="width: 40px; height: 40px; background: indigo"></div>
    </div>
    <div [style.transform]="springTransform()"
      style="width: 40px; height: 40px; background: slateblue"></div>
  `,
})
export class Demo {
  readonly progress = moveValue(0);
  readonly x = moveTransform(this.progress, [0, 100], [0, 200]);
  readonly rotate = moveTransform(this.progress, [0, 100], ['0deg', '360deg']);
  readonly fade = moveTransform(this.progress, [0, 50, 100], [0.4, 1, 0.4]);
  readonly springX = moveSpringValue(this.x, {
    stiffness: 170, damping: 18, injector: inject(Injector),
  });
  readonly linearTransform = computed(() =>
    'translate(' + this.x() + 'px, -50%) rotate(' + this.rotate() + ')');
  readonly springTransform = computed(() =>
    'translate(' + this.springX() + 'px, -50%) rotate(' + this.rotate() + ')');
}