Does Text Fill Wave work in Nuxt 3?

Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in ` `.

Does Text Fill Wave work with Vue 2?

No - the component uses the Vue 3 Composition API and ` ` syntax. Vue 2 support is not planned. If you need Vue 2, the HTML/CSS/JS variant works in any context.

Does Text Fill Wave work with TypeScript in Vue?

Yes. The component is typed and works with both `vue-tsc` and Volar. Props match the `data-anm-*` attributes documented on the main detail page.

Will the animation flash before hydration in Nuxt SSR?

Brief flash is possible because GSAP needs the client to initialize. The component sets the parked state via `gsap.set` on `onMounted` before the first paintable frame. For above-the-fold use in SSR contexts, add a CSS opacity:0 default that the component clears.

GSAP component for Vue

Text Fill Wave in Vue.

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.

Install

Install Text Fill Wave in your Vue project

Text Fill Wave ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.

BASH

Integrate

Where it goes in your Vue app

Text Fill Wave is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.

In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.

The component uses the <script setup> composition API and TypeScript-friendly defineProps.

Gotchas

Same timeline structure as vanilla

Build the paused timeline with both line tweens, then attach one ScrollTrigger - play it once on enter by default, or pass it as animation with scrub when scrubbing. Do not create a ScrollTrigger per line.

Teardown reverts SplitText and kills both tl and ScrollTrigger

onBeforeUnmount must kill the timeline, kill the ScrollTrigger instance, and revert the SplitText split or line elements leak on route change.

FAQ

Common questions

Does Text Fill Wave work in Nuxt 3?: Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in .
Does Text Fill Wave work with Vue 2?: No - the component uses the Vue 3 Composition API and Text Fill Wave for Vue - GSAP component | Annnimate