Scroll animation maps page position to graph progress. The critical work is defining a runway that can reach the intended progress range and behave across breakpoints.

Where this fits

• Faster Motion docs map shows the full documentation structure.
• Faster Motion documentation overview explains the high-level surfaces and reading order.
• Debugging and preflight explains validation before publish.

Scroll trigger anatomy

• A trigger defines which element owns the scroll range, where progress starts, and where progress ends.
• Progress should be normalized before it feeds property writes, timelines, or Canvas parameters. Normalize once, then reuse the result.
• Short sections need extra care because the trigger can run out of runway before progress reaches the intended value.

Pinning and layout flow

• Pinned scenes change how the document flows while the user scrolls. Decide whether spacing should reserve the runway or whether another graph branch compensates for released layout.
• When pin spacing is disabled, verify that something consumes the pin flow values or the section can visually jump after release.
• A pinned scene should be tested with real content above and below it, not only in isolation.

Verification checklist

• Test the top, middle, and end of the scroll range at desktop and mobile widths.
• Confirm the page can still reach content after the scroll scene and that the browser scrollbar does not fight virtual or custom scroll behavior.
• Use validation codes for missing selectors, invalid selectors, bad runway ranges, and pin spacing warnings before publishing.

Working sample slot

Scroll animation: This page reserves a sample location for a later verified example. Add the sample only after the source file, public page, validation output, and visual check all pass.

Faster Motion docs

Use these links to move between the guide set, the deeper reference pages, and the recipe planning pages. Verified working samples will be inserted after this documentation structure is reviewed.

Start

• Faster Motion documentation overview
• Get started with Faster Motion
• Faster Motion concepts

Surfaces

• DOM animation guide
• Canvas animation guide
• Canvas 3D and procedural guide

Reference

• .fmtion file format
• Runtime loading and publishing
• Debugging and preflight
• Node reference index

Start

• Faster Motion docs map

DOM animation

• DOM selectors and targets
• Scroll animation
• Pointer, hover, and drag inputs
• Text, SVG, and path animation

Reference

• Responsive gates and parameter overrides
• Runtime API reference
• Debug API reference
• Validation errors and warning codes
• Node categories reference

Canvas animation

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

3D and procedural

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

Operations

• Production checklist

Recipes

• Recipes overview