moveTarget

Learn more

Animate individual child elements with a boolean trigger. Useful for SVG icons, staged micro-interactions, and stroke draw effects without CSS keyframes.

Each SVG child owns its own frames and timing while sharing the same boolean trigger.

Controls Make it yours

Duration500ms

100ms2000ms

Easingease-out

Reverse duration 200ms

100ms800ms

demo.htmlhtml

<button (click)="animated.set(!animated())">Draw / reset</button>
<svg viewBox="0 0 96 96">
  <circle
    [moveTarget]="animated()"
    [moveFrames]="{ pathLength: [0, 1], opacity: [0.18, 0.42] }"
    moveDuration="500ms" moveEasing="ease-out"
    moveReverseDuration="200ms" />

  <path
    [moveTarget]="animated()"
    [moveFrames]="{ pathLength: [0, 1], opacity: [0, 1] }"
    moveDuration="500ms" moveEasing="ease-out"
    moveDelay="90ms"
    d="M28 51l13 13 28-32" />
</svg>