Create Revealing Text

Hello animators! 👋🏻

In this tutorial, we will be looking at how you can create a cool visual effect where text on the screen fades in character by character. We will pin a section in place to display revealing text as the user scrolls. This is super useful for an important piece of text on the page as not only does it have a nice effect, but it will ensure users are more likely to read it.

The Initial Setup

For this, we do not need many elements. In this particular example, we simply have one section which spans 100vh minimum, and in it, we have some text. Here is the structure pane from Bricks Builder:

We have given the "About" element a class of .about - we can use this later in Motion.page to pin the section.

The text element has a class of .about__animated-text, if you want to copy the styling, we have the following styles:

.about__animated-text {
  font-size: var(--text-2xl);
  color: var(--primary-l-3);
  font-family: "Inter";
  font-weight: 300;
  line-height: 2;
  text-shadow: 0 0 20px #f1cfff;
}

Now, let's add all of the effects in Motion.page

Motion.page Setup

Step 1: We will go ahead and use the ScrollTrigger and ensure the "Lock to scrollbar" option is toggled on. Our example has a delay of 1s. We will toggle on the "pinned element" option, and choose our section class of ".about". Make sure that the "Starts when" option is set to "Pinned element's top reaches 0%" (this means the top of the page). Finally, "Ends when" the pinned element's top reaches -100%.

Step 2: Now, let's add the magic. In the Animation Selector field, make sure to target our text element (.about__animated-text). Then, in the Animation pane, ensure you're working in the From tab. We will add an opacity here to our text of 0.1.

Now, let's click on the To tab and add the following:

  • Opacity: 1
  • Split Text: Characters
  • Stagger: "Amount" 10s start.

And that's it! If you have followed all of the steps, you should now have yourself a nice, effective animation where text is slowly revealed while the user scrolls.

100 %