Adding ScrambleText

Hello folks! 👋🏻

In today's mini tutorial, we will teach you how to make the most of GSAP's ScrambleText feature. This allows you to jumble text with custom characters before the actual characters come into effect. You can create some pretty neat looks with this depending on the context of the website! So, without further ado, continue reading below.

The Setup

The initial setup is extremely easy. All you need are text elements with a class. In this case, we will add a class called .scramble-text to our text elements and then we will target this in Motion.page.

Motion.page Setup

For this effect, you can use a Page Load trigger or a Scroll Trigger. In our example, we are using the Scroll Trigger. Here is a look at our trigger setup:

Next, navigate to the Animation tab and let's enter our selector of .scramble-text. We only need to make a change under the From tab. Head on over to the Custom box and toggle the Code View.

In here, we can enter custom properties including ScrambleText. In our example, we used the following code:

scrambleText: {
  chars: "# █ ░ ▓ █ / #",
  revealDelay: 0.2,
  speed: 0.1,
  duration: 0.2,
}

Of course, you are free to change the values here to anything that suits your needs. The 'chars' are what will be displayed during the scramble.

Further, in the Animation tab, we will also need the following:

  • Split Text: Characters
  • Stagger: Amount 0.5s random

And that's it! Here is a screenshot showing our setup of the Animation pane:

We hope this was simple and hope you enjoy using this awesome affect on your sites!

100 %