Runtime API reference

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

The runtime API is the bridge between page code and source-authored motion. Keep ownership clear so page code controls lifecycle and parameters without duplicating graph behavior.

FmtionLoader methods

  • load(file): validates basic shape, optionally rejects legacy shapes, normalizes authoring mistakes, runs compound preflight, clones source, builds runtime graphs, and returns a load result.
  • save(): returns a clone of the post-normalize, pre-expansion source snapshot after successful load.
  • snapshot(): captures parameter values and state-machine layer state. It does not capture derived visual outputs.
  • restoreSnapshot(snapshot): writes captured parameters and state-machine state back into the current loaded graph.

Load result methods

  • play() starts Canvas timelines, video playback where present, and animation controllers where present.
  • pause() pauses Canvas timelines, video playback where present, and animation controllers where present.
  • dispose() releases graph registrations, listeners, loaded assets, records, render resources, and runtime state owned by the result.

Parameter and data access

  • Use runtime getters/setters for page-owned controls. Avoid page code writing DOM transforms that the graph owns.
  • Use data-table helpers when motion reads structured records rather than one-off scalar parameters.
  • Use onPropertyChange(path, callback) for UI that must reflect parameter changes.

Verified runnable examples

This guide points to proof-backed sample coverage. The full ledger lives in Generated examples and proof log.

DOM: Scroll fade reveal

  • Source: faster-motion/demo/tests/dom/catalog/scroll-animations/fade-reveal/fade-reveal.domgraph.fmtion
  • Expected output: Sections fade and translate into place as their trigger elements enter the configured viewport range.
  • Validation: Schema validation passed. Runtime proof reports zero structural/runtime issues and 17 loaded nodes.
  • Desktop proof: generated-assets/faster-motion-docs/proofs/screenshots/dom-fade-reveal-desktop.png
  • Mobile proof: generated-assets/faster-motion-docs/proofs/screenshots/dom-fade-reveal-mobile.png

Canvas: Fill rule diagnostic

  • Source: faster-motion/demo/tests/canvas/fillrule-diagnostic/fillrule-diagnostic.fmtion
  • Expected output: A contained Canvas scene renders paired path cases so nonzero and evenodd fill handling can be compared visually.
  • Validation: Schema validation passed. Runtime proof reports zero blocking runtime issues and 10 rendered objects; the accepted metadata note is preserved in the proof ledger.
  • Desktop proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-desktop.png
  • Mobile proof: generated-assets/faster-motion-docs/proofs/screenshots/canvas-fillrule-diagnostic-mobile.png

Guide-specific sample target: Runtime API sample that saves a loaded file, captures a snapshot, changes a parameter, restores the snapshot, and validates.

Faster Motion docs

Use this local map together with the left navigation. The source-backed content tree controls the main article order; this section keeps related pages one click away.

Start

DOM animation

Canvas animation

3D and procedural

Reference

Was this guide helpful?