Start Using GSAP's ScrambleText with Motion.page for Extra Flair Today! 🔥

Hello guys, welcome back to the channel. My name is Luke, and in today’s video, I’m going to be showing you a unique effect where we’re going to use something called scramble text. I was recently playing a game called Hackmud, which is kind of like a hacking simulator, and this inspired me to create the same effect for a website. Let me show you what I’m talking about.

So, like I said, Hackmud is an online game hacking simulator. If you notice here, when you hit enter, the text comes up on the display with this scrambling effect where it comes in by blocks. You’ll see a better example here. I thought that looked pretty cool and wondered if we could create something similar in Motion Page. You’ll notice here I’m going for a similar effect. This is just a homepage that I’ve created using similar fonts and colors, but there’s no animation applied just yet; it’s just a basic page as you can see.

What I’m going to do is go into Bricks and add some classes to the text, and then with those classes, we can target them in Motion Page to add some effects. Before that, I’ll just show you the setup in Bricks real quick. If I just go to Pages, all pages, and edit with Bricks here on the homepage, you can see nothing too special. We just have some text here, a title, and three cards with some text inside, and that’s pretty much it.

What I’m going to do is create a class called ‘scramble’ and apply it to the text where I want the scrambling effect to take place. Let’s do it on this one, ‘scramble.’ We’ll also add it to this one here, this big chunk here, my main title here, and these elements as well. I’m just going to copy the styles here and paste, and then do the same for the text chunk here.

Alright, so I’ve added the class ‘scramble’ to every element where I want the effect to take place, and I’m just going to save this over here. Now we’ll work our magic once again in Motion Page. I’ve just opened Motion Page, and I’m going to create a new timeline for this, calling it ‘scramble text.’ If I want this animation to take place on every single page, I’m going to make sure to check this one. For this example, I want this to happen on scroll trigger.

Now, I want the animation to take place instantly as soon as it hits the green line. I’m going to bring these two lines together and put them both at 45%, just above halfway of my display. Next, I want to change this to be ‘top,’ and then I want to trigger each iteration individually because each element here has the same class. If one of those classes hits the line, then they’re all going to take place, which we don’t want. So just make sure this one is toggled on.

For the animation, I’m going to target the class ‘scramble.’ When I highlight this, you can see the first instance of the class is highlighted, which is good, and now we can add our animation. The first thing I want to control is the opacity. I want all of the text to start out with an opacity of zero. As I scroll down, you can see each iteration is individual of one another until it hits the line, which is perfect.

Next, I’m going to the custom box here, and I’m going to click on this button to add some Gap. This is where we’re going to use scramble text. In this box, we want to type ‘scrambleText’ with an uppercase ‘T,’ colon, and then curly braces. We can add some properties here. The first one is going to be the characters that we want to use, ‘chars’ like this, with speech marks, separated by a comma. We can also have a reveal delay; here I’m using 0.2. We can have a speed; I’m using 0.1 here. And we also have a duration; I’m using 0.2 for this.

For the characters, we can actually use anything. If I type, for example, ‘09’ many times, when I scroll down and refresh the builder, you can see the text starts out at ‘0909’ like so. I’ve noticed we can also use characters. I went online to find these characters—just kind of weird symbols that we can use. If I paste them here, you can see we have this full block, a dotted block, a short-sized block, and the same block as we were using at the beginning. Now, as I scroll down and refresh this once more, you can see we get these blocks coming up, which is pretty cool. We’ll just refresh again.

Now, it’s quite fast, but there are more animation properties that we can use down here to make this look a little better. The first one I’m going to use is split text. I’m going to split everything up by characters. I also want to use stagger; I’m using 1 second and setting this to be random. Each is taking way too long, so we want this to be a total of 1 second. Click on this to change it to the amount, and now you can see we get this really cool effect happening. If I save the timeline and then look at this on the front end, remember we have a title here. As soon as it hits the green line, we get this effect, and once again, we get this cool effect going on.

In the game itself, Hackmud, the game doesn’t really have these two characters, so if I remove them temporarily, it looks more like this. We can do random; we can even change this to 0.5 to make it much quicker. This looks a little more related to the game now, like so—a pretty cool effect. Once again, this was inspired by the Hackmud video game. I don’t believe we’ve done a video on scramble text before, so I thought I’d show you an example of how you could use it.

If you liked this video, please don’t forget to give it a like and a thumbs up. If you’ve not already, please do consider subscribing, and we’ll be back soon with some more content for Motion Page. Thank you very much, guys.