Scroll Text Effect

MAX

A scroll text effect for elements

Demo

Animate your ideas with CSS

Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

Usage Examples

Scale Characters

Blur Words

Slide Fast

Fade LinesOne by One

Scale Words

Super Fast Blur

Usage Example


// Basic usage with word-by-word animation
<ScrollTextEffect effect="slide" splitBy="word" speed={1.5}>
  Animate your ideas with CSS
</ScrollTextEffect>
// ------------------------------------------------------------------------------------------------
// Character-by-character with custom threshold
<ScrollTextEffect 
  effect="scale" 
  splitBy="char" 
  staggerDelay={0.1}
  threshold={0.3}
>
  Each character appears individually
</ScrollTextEffect>
// ------------------------------------------------------------------------------------------------
// Line-by-line animation
<ScrollTextEffect 
  effect="fade" 
  splitBy="line" 
  staggerDelay={0.4}
  as="h1"
  className="text-4xl font-bold"
>
  First line appears
  Second line follows
  Third line completes
</ScrollTextEffect>

Properties

The ScrollTextEffect component accepts the following props:

PropertyTypeDefaultDescription
childrenReactNode-The text content to animate
asElementType"p"The HTML element to render
effect"fade" | "blur" | "slide" | "scale""fade"The type of animation
splitBy"char" | "word" | "line""word"How to split the text for animation
classNamestring""Additional CSS classes
thresholdnumber0.1Intersection observer threshold (0-1)
staggerDelaynumber0.05Delay between each element animation (seconds)
speednumber1Speed multiplier for the animation