Elastic Pop Reveal
A tactile, physics-based text reveal component. Splinters text into words or characters and scales them in with a highly customizable GSAP elastic spring effect, triggered on scroll.
Last Modified:Aug 17, 2026
Install
CLI
elastic-pop-reveal
Or install a specific demo variant:
elastic-pop-headline-demo
Or install a specific demo variant:
elastic-pop-paragraph-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The full string of text to reveal. Automatically splits by word or character. |
as | React.ElementType | "div" | The HTML tag to render as. |
splitBy | "word" | "char" | "word" | Whether to split and animate by word or individual character. |
startScale | number | 0.5 | Starting scale of the element before it pops in. |
startOpacity | number | 0 | Starting opacity of the element. |
delay | number | 0 | Delay before the animation begins (in seconds). |
ease | string | "elastic.out(1, 0.4)" | GSAP easing string configuring the spring's amplitude and frequency. |
duration | number | 1.5 | The duration of the reveal. Elastic eases need extra time to oscillate. |
stagger | number | 0.05 | The stagger delay between each word/char revealing. |
viewportOnce | boolean | true | If true, plays once. If false, seamlessly reverses on scroll away. |
triggerStart | string | "top 90%" | Viewport threshold for when the animation should start. |