Text Path
Animated text that follows an SVG path with GSAP
text-path-tw
Customize
21
50
0
1
Props
| 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. |