TextAlongPath

The TextAlongPath text effect maps text characters sequentially along an SVG path, then slides them along the curve to their final layout alignments.

---

Simple Quadratic Curve Alignment

The charSpacing parameter defines the fraction of the total path length allocated between adjacent characters. travel controls the slide offset distance.

PATH_ROUTING

60 FPS

---

Double Loop Curvature

Guiding text characters along complex curves is supported by referencing SVG path geometries with alternate coordinates.

DOUBLE_CURVATURE_FLOW

60 FPS

---

Auto-Rotate Optimization

Disabling the autoRotate flag (setting it to false) forces text characters to maintain their default vertical orientation rather than rotating to align with the path tangent angle.

NO_ROTATION_FLOW

60 FPS

---

Wide Travel Distance Configuration

Increasing the travel property determines the length multiplier of the path traversed by the text characters during the timeline's entry phase.

FULL_SWEEP_PATH

60 FPS

---

Interactive Playback & Repetition

Setting repeat: -1 and yoyo: true configures the path translation to loop back and forth endlessly.

LOOPING_MOTION

60 FPS

---

API Reference

import { textAlongPath } from 'animx/plugins/Text'

const tl = textAlongPath(target, config)

Configuration Options

Option	Default	Description
type	'chars'	Slicing unit layout: 'chars', 'words', or 'lines'.
path	Required	SVGPathElement reference or selector string (e.g. '#path-id').
autoRotate	true	Rotates characters to follow the path tangent angle.
charSpacing	-	Fraction of total path length per character.
travel	0.2	Slide movement distance along the path ($0$ to $1$).
duration	1.2	Slide transition duration in seconds.
ease	'cubic.out'	Deceleration easing profile.
stagger	0.03	Delay offset between subsequent elements in seconds.
revertOnComplete	false	Resets layout and removes absolute spans on complete.
paused	false	Standard playback initialization lock flag.