Text On Path
Words appear one by one along an invisible curve as you scroll, until a full sentence rides the hills and valleys of a hidden line. The line itself is never drawn - only the words describe its shape.
One of 85 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
The first version set the whole sentence on the path the way SVG lets you, and let the browser space it. On a straight stretch that reads fine, but the moment the line bends the letters drift apart over every hill and crush together in the dips - letters sitting just off a curved line get fanned open on the outside of a bend and squeezed on the inside. So now every letter is measured and placed on the curve individually, and the spacing corrects itself wherever the line turns, so the sentence reads evenly through the whole ride.
The reveal is split in two on purpose: the scroll decides when each word is due, but the fade itself runs on its own clock, so someone flying through the section still sees every word get its full soft bloom instead of snapping in. The gaps between words also stretch a little so the sentence fills the curve edge to edge - the letters themselves never do.
Past that it's yours. Give it your own sentence and your own curve, reveal whole words or single characters, sit the text above, on, or under the line, and run the reveal from either end.
What you'll need.
Install
- GSAP
- ScrollTrigger
Concepts
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Text On Path work with React and Vue?
- Text On Path ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Text On Path?
- Yes. Text On Path is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Text On Path without editing code?
- Text On Path exposes 6 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Text On Path free?
- Text On Path is part of the Annnimate Library, a paid subscription (from EUR 20/month billed quarterly, or EUR 199/year). The live preview and customization run free on this page; the paste-ready code is for members.
- What if Text On Path is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Text On Path or the library does not fit your project, reply to your receipt within 14 days for a full refund, no questions asked.
- Can I use Text On Path in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Text On Path on as many projects as you build, with no attribution required.
- Does Text On Path respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
