Text Path

Animated text that follows an SVG path with GSAP

text-path-tw

Tweak the props live

Font Size50

Letter Spacing0

Path Example

Path Scale1

Duration21

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.

Default:21

reversedboolean

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

Default:false

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.

Default:1