Leave behavior

The onLeave prop controls what happens when the trigger ends mid-animation (mouse leaves the icon or parent group). Default is "complete".

<Heart onLeave="complete" />   // default
<Heart onLeave="snap" />
<Heart onLeave="redraw" />

onLeave only applies to trigger="hover" and trigger="parent-hover" — the other triggers have no leave concept.

complete (default)

The in-progress draw finishes naturally. The most natural-feeling default for stroke animations — strokes never get cut off mid-line.

<Heart onLeave="complete" />

Hover, then quickly move the cursor away — notice the stroke completes drawing even after you leave.

If the icon sits inside a parent with a hover color transition, the parent's color will release the moment the cursor leaves while the stroke is still drawing. To keep the host color pinned for the full draw, use the data-motion-state attribute the icon broadcasts on its <svg>.

snap

Cancels the running animation immediately and snaps the icon back to its fully-drawn rest state.

<Heart onLeave="snap" />

Use this when you want a deterministic "icon is reset" feel — for example, in dense UIs where many icons are hovered in quick succession.

redraw

Replays the draw animation when the trigger ends. The icon draws both on entry and on leave, creating a continuous "always-drawing" feel.

<Heart onLeave="redraw" />

Pairs especially well with trigger="parent-hover" on buttons:

<button data-motion-icon-group>
  Continuous motion
  <Send trigger="parent-hover" onLeave="redraw" />
</button>