Play the animation on hover

Hover playback plays the animation you already designed when someone hovers the exported graphic. You don’t build a second hover timeline.

Use this to:

  • Play an icon or illustration on hover
  • Keep authoring on the normal playhead
  • Restart the move each time the pointer enters

On scroll is the other option in the same export dialog.

Export for hover

  1. Finish the animation in the editor. Preview still plays on time.
  2. Export SVG, CSS, or HTML.
  3. In the options dialog, set Playback to Hover.
  4. Place the download on your page and hover the graphic.

Lottie, GIF, and MP4 always play on time. This setting doesn’t apply to those formats.

Play again on the next hover

Each time the pointer leaves and comes back, the animation starts over.

Tip: To play the same motion without a pointer — a button press, a focus ring, or a demo toggle — add the pureanim-host--active class to the exported SVG on your page.

Script console and WebMCP

There is no playback command. Design the motion in Edit → Scripting or through WebMCP, then choose Hover in the export dialog.

WebMCP tools:

  • pureanim_get_state
  • pureanim_list_commands
  • pureanim_run_script
  • pureanim_set_time

The download uses a host class on the SVG (pureanim-host). Layers are still until hover, then play once. Inspect the file after export if you need the exact selectors.

Full command reference: scripting.md. Agent loop: agents.md.