How to Animate a Text Reveal Effect in React with Framer Motion

A letter-by-letter text reveal can be a fun way to highlight information you want the user to read, and is easily achievable in React using variants in Framer Motion.

Start by assigning each line of text to a variable. We’ll be splitting these into an array later.

We can then create our variants to tell Framer Motion how we want this text to animate. Note that my variant for the parent element sentence isn’t really animating anything, but this is where we set the staggerChildren and delay props — on the parent element. These props tell Framer Motion how long to delay the animation between each letter and how long to delay the whole animation from starting after load. The letter variant is where we are setting the actual animation we see on our letters. The hidden part (could be titled anything) is the initial state of each letter, and the visible part is the final state they’ll be animating into.

Time to render our text. We first need a parent element, so this is where I usually set the type of HTML tag I want (in this case, an H3). This is also where we assign our sentence variant, and let Framer Motion know that hidden is our initial state and we’re animating to visible.

Then, directly below it, we’ll split each of the line variables we made earlier into an array using .split(), and map over the array to return each individual character. Note that I’m also using index because we need to give each character a unique key for Framer Motion to create the stagger effect. Make sure to also assign the letter variant to each character, and insert a line break if needed.

And that’s it! Feel free to play around with adding skew, rotate, etc for a flashier animation.