Mask Text Reveal Effects & Animations in Motion.page

In this official video tutorial by Motion.page, you'll learn from Luke how to craft impressive text masking effects and animations in WordPress using the Motion.page plugin. Unlock the potential to create stunning text effects with ease. Explore the possibilities with Motion.page!

Introduction

This tutorial demonstrates how to create a text fill effect that activates on scroll, using Oxygen Builder. The effect includes two styles: one with a stroke that fills from top to bottom, and another using opacity that fills from left to right.

Steps

  1. Setting Up the Page in Oxygen Builder:
    • Create a new page named "Text Mask" and open it in Oxygen Builder.
    • Add three sections, with the middle section containing a background image.
  2. Preparing the Text Elements:
    • Center the content in the middle section and add a div with dark background color and padding.
    • Insert text (about 5rem size) and change the font.
  3. Creating the Left-to-Right Fill Effect:
    • Convert the text to a span and add a class (e.g., 'text mask LR').
    • Apply custom CSS for a linear gradient background, setting up a variable 'mask' for controlling the fill effect.
    • Use webkit properties for background clip and text fill color to create the initial transparent effect.
  4. Animating the Effect in Motion Page:
    • Create a new timeline in Motion Page named 'text mask'.
    • Set up a scroll trigger and target the 'text mask LR' class.
    • Animate the 'mask' variable from 0 to 100 to create the fill effect on scroll.
  5. Creating the Top-to-Bottom Fill Effect:
    • Duplicate the text element and change the font.
    • Add a new class (e.g., 'text mask TB') and remove the previous class.
    • Apply similar CSS as before but change the gradient direction from top to bottom.
    • Add webkit properties for a transparent text fill and a white text stroke.
  6. Animating the Second Effect:
    • In Motion Page, duplicate the animation node and target the 'text mask TB' class.
    • Adjust the animation to trigger individually for each line using split text and stagger settings.
  7. Final Adjustments:
    • Fine-tune the scroll trigger markers for a smoother animation.
    • Preview the effects on the front end to ensure they work as expected.

Conclusion

This tutorial provides a straightforward guide on creating scroll-triggered text fill effects in Oxygen Builder. It showcases two variations: a horizontal fill effect and a vertical fill effect, both achieved through custom CSS and animations in Motion Page. The tutorial is ideal for users looking to add dynamic, scroll-based animations to their text elements in web design.

Video transcript

View full
Hide

Hey guys, Luke here with Motion.page, and today is just a very quick tutorial on how you can make something that looks like this. So, all this is, it's just a basic effect. So, when you scroll down, you can see the text is filling in there, and this is just using your web kit. And then you can see the bottom one here as well is filling from top to bottom. And I'm just using two slightly different styles. This has kind of a stroke on it, a one-pixel stroke, as you can see, and that fills up from top to bottom. And then the top one is just using an opacity for the default color, and then it gets filled up with the whites from left to right. So, I'm going to show you how to make this right now.

So, once again, I'll be using Oxygen Builder to create this today. It's just what I'm familiar with. Here, I'm going to create a new page, and I'm going to call this page 'Text Mask.' Publish. I'm going to open with Oxygen. In the meantime, I'm just going to go and grab some pictures from Unsplash. And let's just do something like abstract. That works, something simple. Uh, let's just do this one and this one. Copy image address.

So, what I'm going to do, because I want to show you this on scroll, so let's just create three sections. Two of them are going to act as buffers. So, I'm just going to add the background to this. I'm going to make this a hundred viewport height. That's width, not height. I'm gonna duplicate this one. And then in the middle, I'm gonna put this background image. Close those down. Background, background image will be this one. I'm gonna leave the heights like that because I'm going to let it, uh, be auto.

What I'm going to do first is just center everything in here. I'm going to add a div for the middle. I'm going to put the background as a dark color, like that. I'm going to give it some padding. Padding L will do. And then next, I'm just going to add text. I'm going to make this text about 5 Ram. Add similar ipsum text, do two sentences, and that's way too much, so I'm just gonna end it here. I'm gonna change the font here to this one, uh, actually this one.

Okay, so what we want to do for this text is, so I'm going to use two different classes just to show you the two different effects. So first, I'm going to convert this to a span. Alright, and then on this span, what I'm going to do is add our class, and I'm going to call this 'text mask,' and then I'm going to call this 'LR,' so it's going to go from left to right on this one. Okay, and then I'm going to add some custom CSS to this class.

So first, I want this text to display inline. So, we want the background to be a linear gradient. We want the color white, and then we want zero, zero. So now, you can see the background is being added to the span. After that, we need zero, 100. And now, what we can do is create a variable, and I'm going to call my variable here 'mask,' and then this needs a value of zero. We're actually gonna make it, in the end, a hundred percent, like this. But we're gonna do this in motion page, but we want it to start at zero, and then in motion page, we'll control it on scroll to become a 100, like that. If I do 50, as you can see, the problem with this is the background's repeating now. So, we just need no repeat, and then as you can see, it is actually 50 percent. So, this no repeat is important as well. Now, let's put this back to zero.

Alright, next, what we need, we need to clip the text. So, to do this, we'll use WebKit background clip, and we want to clip this by text. And then, next one, we need to create a default fill value using text fill color, and this is going to be kind of a dark color. So, what we can do is just use an RGBA with opacity here. This needs to be WebKit as well. WebKit, WebKit text fill color, RGBA 0.1. So, you can see, with a default value of 100, you can see it's white, which is two five five, two five five, two five five. But we just want to make this that on the background there, so just use an opacity of 0.1. And this is our starting point.

So now, if we just load a promotion page, we're going to target this mask here in the custom parameter field. So, I'm going to save this first, and then let's head on over to motion page. Alright, I'm going to create a new timeline here, and this is going to be called 'Text Mask.' I'm just going to load up the page that we're working on here, so I can see what's happening. Alright, so as you can see, here is our element that we just created. So, this wants to be a scroll trigger. I'm going to lock this to the scroll bar. I'm going to leave these values like this just for now. Let's target our class that we've just created, so it was 'text mask LR.' Hit enter. Now, the value that you're seeing now, this is default. This is what I want initially, so I don't need to change anything from, but I do want to go to, and I want this to transition. Remember, on the custom, I'm going to target our mask variable, which we just set here. It currently sets to zero, but we need this to go to 100, like that. So now, as you can see, that looks pretty good. I'm going to save this, see what it looks like on the front. Nice.

So, I just wanted to show you, uh, one different example. So, all I'm going to do is, I'm just gonna duplicate this one, and then let's just change this to vertical. I'll just add some spacing here to my section, so there's a space there. So, for this, I'm just going to change the font, called the 'Stat Liches,' so it's just an uppercase kind of a bold-looking text. And I'm going to add a new class, and this class is going to be called 'text mask,' and then let's do 'bottom,' oh sorry, 'top to bottom,' so 'TB.' And then I'm gonna delete 'LR,' because we're not going to use this one anymore. We only want to use this on the top one. So now, we're going to start from scratch on this one, custom CSS.

So, you could just copy and paste from here and then make an edit, but I'm just going to make this from scratch. So, once again, display inline.

We're going to do background linear gradient. Uh, the first value in this one, we need to bottom, like that. It's going to go from the top to the bottom. So, this is the direction we need. And then we need our color, which is going to be white. It's going to be a white background, zero, zero. So, as you can see, we have the white background there. After that, we need another zero, zero, forward slash 100. And then here, we're going to do our variable once again, and it's going to be the same one. We're going to call it 'mask,' because the value is going to be the same. So, we can still use the same timeline but just use a different animation node. It's going to be 'mask,' and then the value of this is going to be zero. And then once again, we need no repeats on there. So, if I change the value here again to 100, it might even better if I do 50, so you can see what's happening. You can see now it's coming in from the top to the bottom. But once again, we're going to start this from zero, and once again, in motion page, we're going to control this to 100. But we do need a couple of things. I just want to change the styling of this a little bit.

So, once again, like before, we need the WebKits. So, WebKit background clip, this is going to be clipping by text. Once again, we'll give it an initial color of WebKit text fill, and I want the text field to be a transparent color. So, color transparent. So, it's fully transparent this time. Remember, with this one, it's just 0.1, so you can still see it. But with this, I want to give it, um, I want to give the text a border. So, we don't want any fill. First, we need to do WebKit, um, I think it's text stroke width, one. Yeah, so one pixel. And now, if you want to change the color of this draw, it's just going to be text stroke color. And let's do white because it's going to fill with white. So, let's make the borders white as well. Alright, so I'm going to save this.

So, in motion page, what I'm going to do, so we still have this, which is nice. Okay, so all I'm going to do now is just add, well, we could add a new animation node, but it would be easier just to duplicate this one. Click on this, make sure it's selected, and then we just need to change this one. So, I'm going to click on it to delete it, and do 'text mask top to bottom TB.' Enter. So, you can see already, you can, well, you can't really see it because these animations, as you can see, they're happening at the same time. So, what I'm going to do is, I'm just going to click on 'trigger each iteration individually,' so they will be independent from one another. So, this is animating first, and now, as you can see, this one is animating as well. So, that looks pretty cool already. Let's just see on the front, refresh.

So, I just want each line to animate individually from each other because, as you can see, they're all at the same point on each line. So, all I'm going to do for that, I'm going to click on this node here, this one. And then I'm just going to do 'split text,' and I can split those by lines. And then we can also do 'stagger.' So, I'm just going to do one, and then amount. So, it's a total of one. So, in this case, we just need to add the class name in here as well. And the class is just the same as this one, 'text mask TB,' 'text mask TB.' Now, you can see it's working. Save that. Go to the top here, refresh. I'm just going to come down here, like this. Alright, pretty cool.

And then, of course, you can just play around with your, uh, your markers here. So, I'm just going to put them a little bit closer together. I'm going to make this one 75 and 35. Save timeline. And then I'm just going to see this on the front one more time. Refreshed. So, it's much quicker. Lovely. Alright, and there you have it, guys. So, a pretty simple effect. I think it looks pretty nice. Um, this is just showing you how to animate. It's basically a text fill. We have two examples: one's coming from left to right, and then this one's from top to bottom.

So, there you have it. Just a very quick tutorial. If you need any assistance, or you have any questions, please do let us know. And please stick around because we'll be uploading more videos very soon. Thank you.

[Music].

100 %