Text Animation Blur Fade In
A word-by-word text reveal animation where each word fades in from blur. Uses viewport detection to trigger animations when content scrolls into view.
Animations that stand out from the rest.
Appearing text sets aside the text from the rest, it is a great way to make the text more engaging and interesting.
The text splits into individual words, each wrapped in a motion.span. When the element enters the viewport, words animate from blurred and offset to clear and in-position.
Staggered delays (0.02s per word by default) create a wave effect across the sentence. The whileInView trigger means animations replay if users scroll away and back.
An optional delay prop shifts the start time of the entire animation sequence. This allows coordinating multiple Text elements to appear in sequence (e.g., heading first, then subheading).
Works well for about sections, feature descriptions, or any content that benefits from subtle entrance animations that draw readers into the text.
More from Text Animations
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
The text splits into individual words, each wrapped in a motion.span. When the element enters the viewport, words animate from blurred and offset to clear and in-position.
Staggered delays (0.02s per word by default) create a wave effect across the sentence. The whileInView trigger means animations replay if users scroll away and back.
An optional delay prop shifts the start time of the entire animation sequence. This allows coordinating multiple Text elements to appear in sequence (e.g., heading first, then subheading).
Works well for about sections, feature descriptions, or any content that benefits from subtle entrance animations that draw readers into the text.