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.splitTextsupportschars,words, andlines.- 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.pathcan define path-following behavior, withpathCoordsset topercentageorpixels.morphPathacceptsto, optionalshapeIndex,type, andmap.assets.paths[]can store reusable named SVG path data withid,name,d, optionalclosed, 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