Web Design Secrets, Part 2: Staggered Text Reveal Animation

In this short video we'll learn how to stagger our headlines.

Text stagger animation is when characters of a headline reveal themselves one after the other.

And you can add one to your site, in half a minute, no coding needed.

Step 1: Choose one of 3 effects

1. Masked slide up
2. Masked rotate
3. Scrub opacity

Step 2: code generator

Go to the GSAP Text Animator by Refokus

1. Choose an effect
2. Target (Words, Paragraphs etc.)
3. Turn on Scroll Trigger (optional)
4. Then click Copy Code

The options of Scroll Trigger will make sure the heading will animate only when it scrolls into view.

Step 3: paste code

And finally

1. Paste the code at the footer of your site
2. Add the word animate under Custom Attributes in Webflow or Elementor.

Optional: Add CSS for a better looking effect

Add this CSS code and the effect will look even better.

Embed this code between <style> tag and </style> tags, or as custom CSS.

.line {
    overflow: hidden;
    padding-bottom: 0.09em;
}

Final words

And that’s it: Staggered Text Reveal Animation, that you can copy to your website.

Links to sites on the video

• GSAP Text Animations
• Kelvin Zero
• Aspen One
• Elgato Neo Deck
• GSAP Text Animator by Refokus