║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Reveal Text description: A smooth text reveals animation where each heading reveals related content on interaction.

<DemoCodePreview path="demo/components/reveal-text/default.tsx" v0Link="/gsap/reveal-text" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> ```npm npx shadcn@latest add @paceui-ui/reveal-text ``` </TabsContent> <TabsContent value="manual"> <Steps> <Step> **Install the following dependencies** </Step> ```npm npm install gsap @gsap/react ``` <Step> **Copy and paste the following code into your project** </Step> <CodePreview path='components/gsap/reveal-text.tsx' collapsible></CodePreview>

        <Step>
            **Update the import paths to fit your project setup**
        </Step>

    </Steps>
</TabsContent>

</Tabs>

Examples

Word by word

Set type to words, the text will be split by individual words.

<DemoCodePreview path="demo/components/reveal-text/words.tsx" v0Link="/gsap/reveal-text" />

Line by line

Set type to lines, the text will be split by individual lines.

<DemoCodePreview path="demo/components/reveal-text/lines.tsx" v0Link="/gsap/reveal-text" />

Masked line

Set splitTextVars with the code to reveal each line as if it's masked.

<DemoCodePreview path="demo/components/reveal-text/masked-lines.tsx" v0Link="/gsap/reveal-text" />

Assemble

Set gsapVars with the code, and the text will appear as if it's coming from broken pieces.

<DemoCodePreview path="demo/components/reveal-text/assemble.tsx" v0Link="/gsap/reveal-text" />

Props

RevealText

| Prop | Type | Default | |---------------|-------------------------|---------| | type | chars words lines | chars | | gsapVars | gsap.TweenVars | - | | splitTextVars | SplitText.Vars | - |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║