moveTarget

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

Configuration

Duration500ms

100ms2000ms

Easingease-out

Reverse duration 200ms

100ms800ms

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

Preview Area

demo.htmlhtml

<svg viewBox="0 0 96 96">
  <circle
    [moveTarget]="animated()"
    [moveFrames]="{ pathLength: [0, 1], opacity: [0.18, 0.42] }"
    moveDuration="500ms"
    moveReverseDuration="200ms" />

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