Drive motion from the page scroll

Scroll playback ties the animation to how far the graphic has moved through the page. You still design on the timeline. You pick scroll at export.

Use this to:

  • Reveal a graphic as it enters the page
  • Scrub the move while the section is on screen
  • Play the last part as it leaves

Hover is the other option in the same export dialog.

Export for scroll

  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 On scroll.
  4. Choose a Scroll range: Entry, Cover, or Exit.
  5. Place the download in a scrolling page.

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

Entry, Cover, Exit

  • Entry plays while the graphic is coming into view.
  • Cover plays while it fills the viewport.
  • Exit plays while it leaves.

These are export options, not extra tracks on the timeline. If the graphic never scrolls, the animation won’t progress.

Tip: This uses the browser’s scroll-driven animation. In browsers that don’t support it, the graphic stays on the first frame. The export does not add a fallback player.

Script console and WebMCP

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

WebMCP tools:

  • pureanim_get_state
  • pureanim_list_commands
  • pureanim_run_script
  • pureanim_set_time

Inspect the downloaded CSS if you need the exact scroll range names. Don’t invent a playback command.

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