Faster FasterHQ
Open app
Help Center

Responsive gates and parameter overrides

Updated Jun 20, 2026 3 min read

Product media placeholder

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

Responsive motion is source logic, not only CSS. Gate nodes or scenes when a branch should not exist; override parameters when the same branch should keep running with different values.

activeWhen

  • activeWhen can appear on serialized graph nodes and scenes.
  • It accepts a CSS media query string, an OR-array of strings, or null.
  • Invalid media queries surface through ACTIVE_WHEN_INVALID_QUERY. A malformed query can otherwise behave as always active, so treat it as a publish blocker.

overrides[]

  • overrides[] entries use { "when": "...", "set": { "path": value } }.
  • The resolver applies matching overrides at load time and records decisions in FasterMotion.debug.overrides().
  • Warnings include OVERRIDE_INVALID_WHEN, OVERRIDE_INVALID_SET, OVERRIDE_PATH_INVALID, OVERRIDE_PATH_NOT_FOUND, OVERRIDE_PATH_TYPE_MISMATCH, and OVERRIDE_DUPLICATE_PATH_IN_SAME_BLOCK.

When to use which

  • Use gates when the target, input, or render surface should not exist at a breakpoint.
  • Use overrides when the same graph remains valid but distances, density, speed, trigger edges, or visual scale should change.
  • Use debug.gates() and debug.overrides() during public page verification.

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: Responsive sample with a desktop-only pin branch and a mobile distance override, verified through gates and overrides 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?