Scroll Reveal
Text Effects
GSAP ScrollTrigger text reveal with progressive word opacity, optional blur, and subtle rotational unwind.
Loading preview...
Customize
Text
Enable Blur
Base Opacity0.15
Base Rotation4
Blur Strength6
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | required | String text content to reveal on scroll. |
scrollContainerRef | RefObject<HTMLElement | null> | undefined | Optional custom scroll container reference. |
enableBlur | boolean | true | Enable blur-to-clear word transition. |
baseOpacity | number | 0.1 | Starting opacity for each word. |
baseRotation | number | 3 | Initial heading rotation in degrees. |
blurStrength | number | 4 | Initial blur radius in pixels. |
containerClassName | string | '' | Additional classes for the wrapper heading. |
textClassName | string | '' | Additional classes for the text element. |
rotationEnd | string | 'bottom bottom' | ScrollTrigger end for rotation animation. |
wordAnimationEnd | string | 'bottom bottom' | ScrollTrigger end for opacity/blur animation. |