A text animation component that reveals text with sliding block overlays.
Made by chiragInstallation
Usage
API Reference
BlockText
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | - |
animationOnScroll? | boolean | true |
delay? | number | 0 |
blockColor? | string | "#000" |
stagger? | number | 0.15 |
duration? | number | 0.75 |
How it Works
The component uses GSAP's SplitText plugin to split text into individual lines, then animates colored blocks sliding across each line to reveal the text beneath. The animation can be triggered on mount or when scrolling into view.
Credits
- Built with GSAP and SplitText Plugin.
Built by Chirag Saxena. The source code is available on GitHub.
Last updated: 12/1/2025