Help guide

Text, SVG, and path animation

Updated June 20, 2026

Text, SVG, and path animation

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

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

DOM animation

Canvas animation

3D and procedural

Reference

Was this guide helpful?

Sunny Arora

Written by

Sunny Arora

Get technical deep dives delivered to your inbox

Join creators and developers who get exclusive insights, tutorials, and behind-the-scenes content every week.

No spam. Unsubscribe anytime.

Continue Exploring

You might also enjoy