How to Create a Scroll Text Reveal using Next Bricks Animator

In this quick tutorial, I’ll show you how to create an impressive Scroll Text Reveal animation using the Next Bricks Animator in Bricks Builder.

We’ll use GSAP animations via the Next Bricks Animator plugin inside Bricks Builder. This is a great way to bring subtle interactivity and a modern feel to your website.

A full step-by-step video is included below, and you can follow along using the written guide.

The voice in this video is AI-generated, but the script is entirely written by me!
I’m not quite ready yet to record my own voice — and to be honest, I don’t have the right equipment either (haha). Hopefully, in the future, I’ll be able to do full voice-overs myself!

Here’s a step-by-step breakdown:

1. Open Bricks Builder and access the Animator panel from Next Bricks.
2. In the Event setting, select “Scroll” (the second option).
3. In the Trigger field, add the CSS ID where you want the animation to start.
4. In the Element field, add the CSS ID of the text that will be animated.
5. Activate SplitText and set it to Words and Chars.
6. Enable Stagger and set a low value — I used 0.01 for a smooth, continuous reveal.
7. Under Panel Method, choose From To.
8. You can leave the From section empty, and go directly to the To settings:
   • Select Color and set the color you want the text to reveal into. I chose a dark gray.
9. Finally, in the Trigger settings, scroll down and activate the “Scrub” option and set it to 1 for a smoother scroll-based animation.

“Pro” Tip:

A similar technique can also be achieved using the “Scroll Reading” element from Next Bricks.
However, with the method we used here, you get more control over how letters, words, and colors animate. For example, you can even apply transform effects for a more dynamic reveal.

If you want to use a transform (like moving the text from bottom to top), then you must set values in both the “From” and “To” tabs. For instance, if you want the letters to rise up as they appear, you can set:

• From → top: 10px
• To → top: 0px

This way, the animation looks much smoother and visually engaging!