DOM animation writes to real webpage elements. Good DOM motion starts with stable selectors, one owner per property, visible validation output, and breakpoints that match the page layout.

Two DOM authoring paths

• domGraph.nodes[] is the graph-based path for modern DOM motion. It uses serialized graph nodes with params and connections.
• dom[] is the older parameter-driven animation array. It still supports selector, driver, driverType, from, to, keyframes, duration, splitText, and scroll options.
• Use domGraph when the motion needs multiple nodes, derived values, validation, reusable templates, scroll/pointer inputs, or wireable selectors.

DOM animation fields

• DomAnimation.selector is required.
• driverType supports scroll, bool, and float.
• mode supports time and scroll.
• splitText supports chars, words, and lines.
• scroll options include trigger, start, end, scrub, pin, pinSpacing, anticipatePin, markers, scroller, toggleActions, and once.

Writer ownership rules

• A target property should have one owner. Two graph branches writing the same transform component can trigger MULTIPLE_TRANSFORM_WRITERS_SAME_COMPONENT.
• Use one boundary writer for grouped transform work when the values belong together.
• Use CSS custom variables for values the page style sheet should consume, and direct property writes when the graph should own the visible property.

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: DOM hero sample with scroll progress, one remap, one opacity writer, one translate writer, and a validation screenshot with no warnings.

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