Selectors are part of the contract between the webpage and the motion file. Treat them as source-backed API, not incidental styling hooks.

Selector contract

• Prefer purpose-based classes or data attributes over temporary layout classes.
• Scope selectors to the section that owns the animation. Repeated CMS blocks can otherwise receive the wrong writer.
• Check empty states, repeated lists, and mobile markup because they can add, remove, or duplicate matched elements.

Wireable selectors

• Several writer nodes accept a static params.selector or a wired connections.selector.
• A wired selector takes precedence at bind time. Use this when an upstream node creates the selector, such as split text producing a piece selector.
• This avoids hardcoding generated classes downstream and makes text mode changes safer.

Validation and debug

• Use FasterMotion.debug.inspect(".selector") to map DOM elements back to graph nodes.
• Use debug.validate() for no-match and invalid-selector errors before publishing.
• Relevant codes include SCROLL_TRIGGER_NO_MATCH, STAGGER_TARGET_NO_MATCH, PIN_TARGET_NO_MATCH, and invalid selector variants.

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: Selector audit sample that intentionally starts with one missing selector, shows the validation code, then fixes the selector.

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