3D Text Reveal

Scroll-triggered 3D text animation with GSAP

3d-text-reveal-tw

Scroll Down

Explore

The

Future

Design

Customize

Text Items

Text Class Name

Font Size

7.0

Font Weight

900

Perspective

1000

Radius Offset

0.40

Gap (degrees)

Start Rotation

-80

End Rotation

270

Scroll Distance (multiplier)

4.0

Scrub Smoothing

1.0

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.

itemsstring[]

Array of text strings to display in the 3D cylinder. Each item will be positioned along the cylinder surface.

Default["Scroll", "To", "Reveal", "3D", "Text"]

classNamestring

Additional CSS classes for the wrapper container.

Default""

textClassNamestring

Additional CSS classes for the text items. Use this to override text styling, colors, or add effects.

Default""

scrollDistancestring

The scroll distance for the animation. Accepts viewport units (vh) or pixels (px). When using inside a scroll container, use pixel values.

Default"300vh"

perspectivenumber

CSS perspective value in pixels. Higher values create a more subtle 3D effect.

Default1000

radiusOffsetnumber

Multiplier for cylinder radius based on viewport size. Lower values create tighter text spacing. Range: 0.1 to 1.0.

Default0.4

startRotationnumber

Initial rotation angle in degrees for the cylinder when scroll begins.

Default-80

endRotationnumber

Final rotation angle in degrees for the cylinder when scroll completes.

Default270

scrubSmoothingnumber

GSAP scrub smoothing value. Higher values create smoother, more delayed scroll response.

Default1

fontSizestring

Font size for text items. Supports CSS units and clamp() for responsive sizing.

Default"clamp(3rem, 9vw, 7rem)"

fontWeightnumber

Font weight for text items. Range: 100 to 900.

Default900

gapnumber

Angle gap between items in degrees.

Default15