Text, SVG, and path animation

Text and path effects are easiest to maintain when generated pieces and path references are graph-visible instead of copied into downstream hardcoded selectors.

Text controls

• DomAnimation.splitText supports chars, words, and lines.
• Generated text pieces should be wired forward through a selector output when possible.
• After copy changes, re-check line breaks and word counts because they can change the generated piece structure.

Path controls

• DomAnimation.path can define path-following behavior, with pathCoords set to percentage or pixels.
• morphPath accepts to, optional shapeIndex, type, and map.
• assets.paths[] can store reusable named SVG path data with id, name, d, optional closed, and optional control points.

Publishing checks

• Check text accessibility after splitting. Visual pieces should not destroy the intended reading order.
• Check path progress at 0, midpoint, and 1.
• Use reduced-motion handling for high-frequency text scrambling, large path movement, or repeated letter motion near primary content.

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: Split text plus path progress sample with piece selector wiring and before/after text copy check.

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