3D Text Reveal
Scroll-triggered 3D text animation with GSAP
3d-text-reveal-tw
Customize
4
1000
0.4
15
-80
270
1
7
900
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | string[] | ["Scroll", "To", "Reveal", "3D", "Text"] | Array of text strings to display in the 3D cylinder. Each item will be positioned along the cylinder surface. |
| className | string | "" | Additional CSS classes for the wrapper container. |
| textClassName | string | "" | Additional CSS classes for the text items. Use this to override text styling, colors, or add effects. |
| scrollDistance | string | "300vh" | The scroll distance for the animation. Accepts viewport units (vh) or pixels (px). When using inside a scroll container, use pixel values. |
| perspective | number | 1000 | CSS perspective value in pixels. Higher values create a more subtle 3D effect. |
| radiusOffset | number | 0.4 | Multiplier for cylinder radius based on viewport size. Lower values create tighter text spacing. Range: 0.1 to 1.0. |
| startRotation | number | -80 | Initial rotation angle in degrees for the cylinder when scroll begins. |
| endRotation | number | 270 | Final rotation angle in degrees for the cylinder when scroll completes. |
| scrubSmoothing | number | 1 | GSAP scrub smoothing value. Higher values create smoother, more delayed scroll response. |
| fontSize | string | "clamp(3rem, 9vw, 7rem)" | Font size for text items. Supports CSS units and clamp() for responsive sizing. |
| fontWeight | number | 900 | Font weight for text items. Range: 100 to 900. |
| gap | number | 15 | Angle gap between items in degrees. |