ClipPath Text Flow
Animate text along custom SVG paths in Framer. Infinite-scrolls smoothly with full control over content, font, animation speed, scroll direction, and SVG path.
Made with Workshop
Build your own component with AI
The SVG Text Path Animator brings static text to life by making it flow along any SVG path. It’s perfect for adding subtle motion to highlight information, banners, or brand elements in the background without complex setups.
What you can customise
Text: The content that displays along the SVG path.
Typography: Font family, weight, size, line - height, alignment, letter spacing, OpenType features, and color.
SVG Path: Craft a custom SVG path with ease. Copy it from Figma, then paste the SVG path code here to define the animation route.
Repeat times: If your text content is short, increase this to make the scrolling look like an infinite loop.
Speed: Adjust the scroll pace of the text flows along the SVG path.
Direction: Control the text movement direction from the start to the end of the path or the other way around.
Stroke Width and Color: Add a background color behind the text to make the information stand out more.
