Text gently unblurs and reveals on scroll.
Scroll the box. Words fade in and unblur one after another while the block straightens. Changing a control resets the scroll.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "" | The text to be animated. It is split into words. |
scrollContainer | HTMLElement | null | null | Optional scroll container element. If provided, GSAP uses it for scroll triggers; otherwise it defaults to the window. |
enableBlur | boolean | true | Enables the blur animation effect on the words. |
baseOpacity | number | 0.1 | The initial opacity value for the words before the animation. |
baseRotation | number | 3 | The starting rotation (in degrees) for the container before it animates to 0. |
blurStrength | number | 4 | The strength of the blur effect (in pixels) applied at the start of the animation. |
containerClassName | string | "" | Additional CSS class(es) to apply to the container element. |
textClassName | string | "" | Additional CSS class(es) to apply to the text element. |
rotationEnd | string | "bottom bottom" | The scroll trigger end point for the container rotation animation. |
wordAnimationEnd | string | "bottom bottom" | The scroll trigger end point for the word opacity and blur animations. The animation completes when the bottom of the text reaches the bottom of the container. |
Keyboard shortcuts and ARIA behavior.