Text Fill Wave
A big headline that fills in color as it enters the viewport, with a bright accent wave riding the edge of the fill line by line. Can also be tied to the scrollbar.
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.
For a while the fill felt way faster than the time I gave it, and I couldn't see why. Turned out the sweep was measured across the whole width of the section, not the letters, so the slow ending of the movement happened in the empty space next to the text, where there's nothing to see. Each line now measures just its own letters, and the slow finish lands on the last letters where you can actually watch it settle.
The colour band rides just ahead of the dark fill, so letters light up for a moment before they settle, and the edge is tilted a little so it cuts through the letters instead of dropping in flat. You can hand it more than one colour and they follow each other through the text in order, and the pace stays the same however many you add.
Past that it's yours. Any number of lines, each starting a beat after the one above. Set the colours, how wide the band is and how far apart the colours travel, and either let it play once as it scrolls into view or tie the whole fill to the scrollbar.
What you'll need.
Install
- GSAP
- ScrollTrigger
- SplitText
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 Fill Wave work with React and Vue?
- Text Fill Wave 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 Fill Wave?
- Yes. Text Fill Wave 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 Fill Wave without editing code?
- Text Fill Wave exposes 5 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 Fill Wave free?
- Text Fill Wave 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 Fill Wave is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Text Fill Wave 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 Fill Wave in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Text Fill Wave on as many projects as you build, with no attribution required.
- Does Text Fill Wave 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.
