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 Looiking 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

Unlock exclusive web design tips and tricks! Join our mailing list for a monthly dose of inspiration delivered straight to your inbox.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
I will never send you spam. Unsubscribe at any time.

More videos

Next

Chevron
No next video
Back to all videos
Chevron

Previous

No previous video
Back to all videos

Some of the links on this page are affiliate links, meaning I may receive a commission if you follow them. This allows me to continue providing free content and educational resources for you, and for you it changes nothing. Also, I 100% stand behind every product I recommend. Thank you for supporting my small business