DOM animation starts with target selection. A reliable selector strategy makes scroll, pointer, text, and property writes predictable across responsive layouts.

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.

Targeting model

• A DOM graph can read from and write to elements matched by CSS selectors. Treat those selectors as part of the public contract between the page template and the motion file.
• Prefer stable classes or data attributes that describe purpose, not visual styling. A selector tied to a temporary layout class is harder to maintain.
• Scope target selectors to the section or component that owns the motion so repeated blocks do not receive the wrong write.

Property ownership

• Avoid multiple writers owning the same transform component or visual property on the same target. One graph branch should own translate, scale, opacity, color, or path progress for a given target.
• When a target needs several changes together, compose the values upstream and write them from a single boundary node.
• If a page already has authored CSS transitions, decide whether Faster Motion owns the property or whether CSS owns it. Do not let both systems compete.

Selector checks before publishing

• Run validation after the page template and motion file are both loaded. A selector that passes in a draft page can fail after a template or breakpoint change.
• Use the debug inspect flow to map a DOM selector back to graph nodes when a target is not moving.
• Check empty states and repeated CMS content because they can add, remove, or duplicate target elements.

Working sample slot

DOM selectors and targets: 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