Help guide

Debugging and preflight

Updated June 19, 2026

Debugging and preflight

Product media placeholder

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

Preflight is a gate, not a suggestion. A file is not production-ready until source validation, runtime validation, visual checks, and public page checks all agree.

Recommended preflight order

  • Validate JSON against the generated schema.
  • Load the file in a production-equivalent page.
  • Run await FasterMotion.debug.validate() and treat error-severity results as blockers.
  • Inspect the relevant surface: selectors for DOM, scene wires/textures for 3D, physics readers for physics, state-machine readers for interaction.
  • Capture desktop and mobile screenshots or video proof.

Common failure classes

  • Missing or invalid selectors.
  • Dead node or port wires.
  • Two writers owning the same transform component.
  • Scroll trigger runway that cannot reach the intended progress.
  • Malformed responsive gates or overrides.
  • Blank Canvas or 3D frames caused by missing mounts, assets, or offscreen generated resources.

What to record

  • The .fmtion source path and version.
  • The page URL and viewport.
  • Validation output and accepted warnings.
  • Screenshots or video frames for the visual surface.
  • The exact node, selector, scene, or asset ID involved in a failure.

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: Debug sample with one intentionally broken selector, validation output, fix, and clean validation output.

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?

Sunny Arora

Written by

Sunny Arora

Get technical deep dives delivered to your inbox

Join creators and developers who get exclusive insights, tutorials, and behind-the-scenes content every week.

No spam. Unsubscribe anytime.

Continue Exploring

You might also enjoy