Scroll animation maps document position into graph progress. Most production bugs come from missing targets, invalid selectors, short runways, pin flow, or mobile layout changes.

Scroll trigger fields

• The older DomAnimation.scroll block supports trigger, start, end, scrub, pin, pinSpacing, anticipatePin, markers, scroller, toggleActions, and once.
• Graph scroll nodes expose progress that can drive remaps, keyframes, CSS variables, DOM writers, Canvas parameters, or gates.
• Normalize scroll once and reuse the result instead of recreating similar progress branches.

Pin and runway rules

• A trigger needs enough runway for progress to reach the intended end state.
• Pinned scenes must preserve or intentionally replace page flow. If pinSpacing is disabled and nothing consumes the pin flow ports, validation can emit PIN_NO_SPACING_NO_CONSUMER.
• Test top, mid, end, and release positions with real content above and below the section.

Relevant validation

• SCROLL_TRIGGER_NO_MATCH: the trigger selector matched no elements.
• SCROLL_TRIGGER_INVALID_SELECTOR: selector syntax failed.
• SCROLL_TRIGGER_OUT_OF_RUNWAY: start and end positions cannot produce a valid progress range.
• VIRTUAL_SCROLL_NATIVE_RUNWAY_LEAK: native scroll still exists while virtual scroll owns the interaction.

Verified runnable example

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

Guide-specific sample target: Scroll runway sample with short-section failure, corrected end edge, and debug scroll 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

• Faster Motion docs map
• Faster Motion documentation overview
• Get started with Faster Motion
• Faster Motion concepts
• .fmtion file format

DOM animation

• DOM animation guide
• DOM selectors and targets
• Scroll animation
• Pointer, hover, and drag inputs
• Text, SVG, and path animation
• Responsive gates and parameter overrides

Canvas animation

• Canvas animation guide
• Canvas area lifecycle
• Canvas objects, assets, and rendering
• Canvas inputs and state machines

3D and procedural

• Canvas 3D and procedural guide
• 3D scenes, cameras, and lights
• Procedural geometry and fields
• Particles and physics

Reference

• Node reference index
• Node categories reference
• Runtime loading and publishing
• Runtime API reference
• Debugging and preflight
• Debug API reference
• Validation errors and warning codes
• Faster Motion production checklist
• Faster Motion recipes overview