Use DOM animation when the subject already exists as HTML, SVG, or CSS on the page. This is the right surface for page sections, text reveals, hover states, scroll-based storytelling, responsive transitions, and interface details.

Common DOM graph flow

1. Read progress from scroll, pointer, time, events, or a parameter.
2. Transform that signal with timeline, easing, remap, math, spring, stagger, or text nodes.
3. Write the result to CSS properties, transform components, attributes, text content, CSS variables, or clip paths.
4. Validate selectors and writer ownership before publishing.

Use DOM for

• Scroll reveal and parallax scenes.
• Hover and pointer-follow interactions.
• Text split, text reveal, scramble, wave, and stagger effects.
• SVG path motion, path morphs, masks, and clip-path reveals.
• Responsive motion controlled by activeWhen or parameter overrides.

Key node families

• inputs: scroll, pointer, time, keyboard, DOM event, and signal sources.
• animation: timelines, tweens, keyframes, scroll tweens, and stagger drivers.
• boundary: DOM property, pose, string, template, variable, and attribute writers.
• text: split text, per-character progress, text reveal, and text styling nodes.
• paths: path read/write, trim, offset, morph, bend, wave, and related SVG/path operations.

Production checks

• No writer should fight another writer for the same transform component on the same element.
• Selectors should match the rendered page at the viewport where they are active.
• Scroll runways should allow progress to reach the intended range.
• Reduced-motion behavior should be intentional for any motion-heavy section.

Working sample slot

DOM sample: Insert a verified scroll-driven text reveal or hover card sample using a small .fmtion file and matching HTML. This page intentionally reserves the sample location so the live docs can ship before the verified examples are inserted.

Faster Motion docs

Use these pages as the first public Faster Motion documentation set. Working samples will be inserted after each sample is verified.

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

Related product guides

• Add motion to a page
• Use the visual editor for page motion
• Create a Canvas visual
• Meet the Visual Motion Editor