Scroll Text Effect
MAX
A scroll text effect for elements
Demo
Animate your ideas with CSS
Exclusive Launch 50% offspots left: 0 / 50
$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:
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The text content to animate |
as | ElementType | "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 |
className | string | "" | Additional CSS classes |
threshold | number | 0.1 | Intersection observer threshold (0-1) |
staggerDelay | number | 0.05 | Delay between each element animation (seconds) |
speed | number | 1 | Speed multiplier for the animation |
