Create Revealing Text 2

Hey guys! 👋🏻

Here is another version of a simple but effective text reveal animation which you can add to your elements. All you need is some text elements using the same class which we can use to target in Motion.page, and the animation setup is also relatively simple! Let's get started.

The Initial Setup

Let's use a class on the text elements where we would like this animation to take place. In our example, we will add a class of .text-animation to keep things nice and simple! For the initial setup of elements, that's literally it! Just add that class to your text elements and next, we will hop into Motion.page to add the creativity.

Motion.page Setup

Step 1: Since this animation may take place across several text elements, we opted to go with the Scroll Trigger and use the toggle action "Reverse on scroll back leave". What this means is that the animations will reverse when you scroll back up the page, essentially meaning that the animation will run again when you scroll back down. Further, we will need to ensure "Trigger each iteration individually" is selected so that all of the animations do not happen at once.

Here is a screenshot of our setup for the Trigger:

Step 2: In the animation tab, let's first target our element(s) by entering the class you gave to your text elements, in this case, .text-animation. Then, let's start under the From tab. We will start by adding:

  • Opacity: 0
  • TranslateY: 20%

Next, navigate to the To tab where we will add the following:

  • Opacity: 1
  • TranslateY: 0%
  • SplitText: Words
  • Stagger: Amount 0.6 start
  • Ease: Back inOut

And that's all there is to it! If you followed these steps, you should see a nice text reveal where the text fades in from the bottom with a very subtle bounce effect, thanks to using Back under the Ease option.

100 %