Text Path

Animated text that follows an SVG path with GSAP

text-path-tw

Text

Font Size

Letter Spacing

0.0

Path Scale

1.0

Duration

Reversed

Name	Type	Default	Description
`text`	string	`"Your text goes here"`	The text content to animate along the path.
`path`	string	`""`	SVG path data string (the 'd' attribute value). The text will animate along this path.
`className`	string	`""`	Additional CSS classes for the container.
`duration`	number	`21`	Animation duration in seconds for one complete loop around the path.
`reversed`	boolean	`false`	Reverse the animation direction. When true, text moves counterclockwise.
`fontSize`	string	`"17px"`	Font size for the text. Accepts any valid CSS font-size value.
`letterSpacing`	string	`"normal"`	Letter spacing for the text. Accepts any valid CSS letter-spacing value.
`viewBox`	string	`"0 0 240 240"`	SVG viewBox attribute. Adjust to match your path dimensions for proper rendering.
`pathScale`	number	`1`	Scale factor for the entire path. Values > 1 make it larger, < 1 make it smaller.

textstring

The text content to animate along the path.

Default"Your text goes here"

pathstring

SVG path data string (the 'd' attribute value). The text will animate along this path.

Default""

classNamestring

Additional CSS classes for the container.

Default""

durationnumber

Animation duration in seconds for one complete loop around the path.

Default21

reversedboolean

Reverse the animation direction. When true, text moves counterclockwise.

Defaultfalse

fontSizestring

Font size for the text. Accepts any valid CSS font-size value.

Default"17px"

letterSpacingstring

Letter spacing for the text. Accepts any valid CSS letter-spacing value.

Default"normal"

viewBoxstring

SVG viewBox attribute. Adjust to match your path dimensions for proper rendering.

Default"0 0 240 240"

pathScalenumber

Scale factor for the entire path. Values > 1 make it larger, < 1 make it smaller.

Default1