Create Awesome Scrolling Texts with Motion.page/GSAP 🔥💪🏻
In this tutorial, Luke demonstrates a practical approach to creating a scrolling text effect using Motion Page with Bricks Builder for web design. The focus is on creating dynamic text animations that enhance the visual appeal and interactivity of websites. Luke guides viewers through the process of setting up these effects, including examples like scrolling headings where a section of the text moves independently. The tutorial highlights the adaptability of these techniques for adding engaging content to web pages.
Steps
Setting Up the Page in Bricks Builder:
- Create a New Page: Begin by creating a new page in Bricks Builder, naming it appropriately for the project.
- Import and Arrange Sections: Import pre-designed sections or create new ones to prepare the layout for the scrolling text effect.
- Prepare Text for Animation: Organize the text within the sections, applying specific classes to elements that will be animated, ensuring they can be targeted in Motion Page.
Configuring the Scrolling Text Animation:
- Set Up Text Containers: Place the text in containers, separating parts of the text that will scroll from those that will remain static.
- Create Animation Classes: Assign classes to the scrolling text elements, preparing them for animation with Motion Page.
Animating with Motion Page:
- Create a New Timeline: Start a new timeline in Motion Page, naming it based on the animation effect, such as "Scrolling Text."
- Configure Animation Trigger: Establish triggers to control when the text animation starts and stops, based on the user's interaction with the page.
- Apply Scrolling Text Effects: Use Motion Page to animate the scrolling text, creating a dynamic visual effect as the text moves.
Enhancing the Animation:
- Implement Looping Effects: Set the animation to loop for continuous movement, adding a lively element to the webpage.
- Customize Animation Speed and Direction: Adjust the speed and direction of the scrolling text to match the design and user experience goals.
- Refine Animation for Smooth Transitions: Fine-tune the animation settings to ensure the scrolling text flows smoothly and integrates well with the overall page design.
Conclusion
Luke's tutorial provides a detailed and accessible guide for incorporating scrolling text animations into web designs using Bricks Builder and Motion Page. By following the outlined steps, designers can add an interactive and visually appealing element to their websites. This tutorial not only enhances the aesthetic appeal of web pages but also engages visitors with its creative use of text animation.
Video transcript
Hello, guys, welcome back to the channel. My name is Luke, and I'm here with Motion Page. In today's tutorial, I'm going to show you how to create a kind of like a scrolling text effect. This is quite popular; sometimes, you'll see headings, and like one section of the heading is kind of scrolling up. I'll put some examples on the screen right now so you can see what I'm talking about. We're going to do two simple examples in this video, and yeah, let's get right into it.
I will just say for this video, I will be using Bricks Builder once again, so if you are using Bricks, then this should be good for you, but the principle is the same if you're using Oxygen or anything else. If you can mimic the markup, then you shouldn't have any issues whatsoever.
Alright, so I've just gone ahead and created a new page here. I'm going to call this Rolling Text, and I'm going to edit this with Bricks. Just for convenience, I'm going to go ahead and import some sections to make this [Music] faster, and for the video today, I want to focus on this section here, and we're going to apply the effect to this community thing here.
Alright, so as you can see, I have two sections here, and like I said, we're going to focus on this purple text right here where it says "community." So you can see how it's made up. We have a title container which also contains this text, and then inside there, we have the heading. Now, this heading currently has a span attached to it to give it that purple color, but I'm going to separate those. So what I'm going to do first is wrap my heading in a div. I'm going to call this heading wrapper.
Now, what I want to do is just duplicate this heading, and on the first one, I want to remove this "Community" like that, and then on this one, I just want to keep the community text. Okay, so you should have something that looks like this. Now, obviously, we want these to be in line with each other, so what I'm going to do is on the heading wrapper, I want this to be display Flex as a row. So I'm just going to apply a utility class. You could also do it like this: flex and row, and that'll do automatic, but I'm going to use some utility classes here, do Flex row. That's basically the same thing as what I just did, and then I'm also going to add some Gap to this as well.
Now, you can add the Gap here. Do make sure you're on the ID before you add Gap, just so you're not messing up your utility classes like I just did, but I'm just going to add some Gap with the utility class, and that's going to be extra small. So now, I have something that looks like that. Okay, so you should have a heading wrapper which is containing your left side text here, and then the heading here, which is going to wrap the scrolling text.
So what I'm going to do for this one, I'm going to wrap this once again in a div, and I'm going to call this rolling text wrapper. Now, I want to duplicate this heading two more times, so you should have something that looks like this, and now I'm just going to rename these. I'm going to give them different values, so I'm going to call this one "members" and then this one "clients."
Now, you'll notice that my gradient has disappeared, so my gradient is actually also a class, so I can just apply that class manually to this up here. So, "community," and then I'm just going to go up here and do "gradient text gradient primary" and copy the Styles, paste styles. Okay, Bricks Builder doesn't want to do that, so we'll do it manually.
Alright, so now this might happen. Now, all we need to do is go to the rolling text wrapper and just make sure that this is the flex column, and the final thing I want to do is just make sure that the typography is set to left align, left align. Make sure that's done on the ID. Okay, so you should have something that looks like this now.
So, let's again do a quick overview. So, we have the header wrapper here, then inside there, we have the left header, and then on the right side, we have the rolling text wrapper, which contains three headings. On this rolling text wrapper, I want to give it a unique class that we can use in Motion Page. So, all I'm going to do is apply a class called "roll text."
Okay, so I'm going to save this for now, and let's open up Motion Page just to see what this all looks like. Okay, so I'm going to go ahead and create a new timeline. I'm going to call this "rolling text." Now, I want this to be constant, so I'm going to keep this as page load. I do want to load our new page here, and we want to target this class here called "rolling text," so I'm just going to type in "Rolling text" here. So, when I hover over this, you can see over here it's being highlighted, which is good.
Now, if I apply a translate on the two, just to see what's happening here, so let's do, just for example, minus 100%. So, you can see it's going up like so. Now, a couple of things I want to do in Bricks Builder is I want to give our main heading wrapper a set height. Okay, so I got to layout here, and we'll do height. We actually, let's do Max height, and let's try something like, um, 67 pixels. So, you can see now that this box is cutting off the other two texts there, which is a good thing. That's kind of what we want.
So, I'm going to save that again and see if anything changes here. So, you can see the distance it travels up now has changed. Now, the next thing I want to do is make sure that these are all 100% height of its parent. So, I'm just going to go to heading, and I want to make sure that the minimum height of this is 100%, and we'll do the same for each one as well. So, minimum height, 100% of the parent, and then this one already has a Min height, and I guess that's coming from this one here.
So, once again, let's save that Min height, refresh this one. So now, as you can see, when it's going up 100%, it's more in line. So, the second one comes in, and it's more in line with the parent now, which is good. So, now what I want to do is duplicate this one. I'm going to move this forward one second because I want there to be a slight pause on the page load, and then we'll give another second break, and then here, instead of 100%, we'll do 200%.
And now, we'll just play the timeline. So, you can see already we have this nice effect. It's kind of going up like that. Perfect. So, the last thing we need to do in Bricks is go to the main heading wrapper and then just do overflow hidden, and, it looks like I applied 67 pixels on the wrong element, so I'm just going to look where I applied that. So, you can see I accidentally applied it to the Gap extra small class, which is not good. So, let me just go ahead and remove that, and we need to apply it to The Heading wrapper on the ID, so that needs to be 67 pixels like so.
Okay, so save that, and then let's see Motion Page here once again. Cool, so we're almost there. Now, all I want to do now is go to the advanced options, and then I want to play the timeline in a loop. Now, minus one, as you can see, minus one just means infinite amount of times. I'm also going to enable yo-yo, so that it goes back on itself. So, let's see that once again. Now, that's too quick, so we'll apply a 1-second delay, just like we have in these gaps here. So, now it's going to wait 1 second and then go back.
Now, because there's a 1-second delay, that means that here, it's going to go back to break and then wait 1 second. So, here is actually 2 seconds, so I'm just going to move these back 1 second each, and that should fix everything. So, we'll play that one more time. 1 second, one second. Okay, cool.
Now, the last thing I want to do is set this to be none, and this just means it's going to be much more linear, like so. Alright, so I'm going to save the timeline and see this on the front end. So, you can see it's rolling up, it's going to wait, come back down.
Okay, so that's the first example. Now, the next example I want to show you is going to be uh a much more linear, without delays in between, and it's going to be a repeating scroll. So, what I want to do now is back in Bricks, all I'm going to do is this rolling text wrapper, I'm going to duplicate this, and this one's going to be rolling text wrapper 2. I'm going to label this one as one.
Okay, and then the last thing I need to do is wrap these two in its own element. So, I'm just going to convert, not to convert, sorry, wrap into a div, and I'm going to call this um rolling text wrapper like that. I'm going to put this one inside of it as well. Just for the time being, I'm going to remove the Overflow hidden, so I can see what's going on. So, as you can see, that already looks pretty good. So, to be honest, the setup already looks good, so I'm just going to leave that like it is, and then put the Overflow hidden back on here. Well, actually, let's leave it like this, so we can see what's happening within Motion Page.
So, save this. Alright, so remember, this is example two. So, I'm just going to change this timeline a little bit here. So, I'm just going to delete this animation, and, let's just reset everything here. So, page load is correct. Now, translate on rolling text, we want that to go up 100%. Okay, if I add the loop once again, without any delay this time. So, you can see here, it's quite fast, so I'm just going to extend this to around 7 seconds, so it's much slower now. And because we have two, it Loops nicely.
Now, if I don't have two, if I go back to Brick and delete, for example, rolling text wrapper 2, so if I delete that, and, go back to Motion Page, you'll see here that we have this undesirable effect going on. So, it's going up minus 100%, but um, obviously, when it gets towards the end, there's a lot of Blank Space here, and obviously, that's not good. We don't want that. So, that's why we are adding two of these elements. So, I'm just going to convert that, change, save that, and now, if I apply the overflow hidden, we'll save it now, and now in Motion Page, you'll see this happening quite nicely, and the second one comes into effect. That Loops quite nice.
Okay, so I'm going to save this timeline, and then let's check this on the front one more time. So, Community to members to clients, and then back to community. So, there you have it, guys. Thank you for watching. I hope you like this simple tutorial, and if you have any questions or comments, please do leave them down below, and once again, we'll be back with another video next time. Thank you.
