Text Scramble Reveal

TEXT SCRAMBLE REVEAL

Turn any Showit text into an animated scramble effect. When the text scrolls into view, the letters scramble before resolving into the original words.

The effect automatically uses the text you type in Showit and matches the capitalization of your original lettering.

HOW TO USE IT

1. CREATE YOUR TEXT

Add a text element in Showit and type your text normally.

Style it however you'd like using Showit's text settings. You can choose your own font, size, color, alignment, and other styling.

2. ADD THE CLASS SELECTOR

Select the text element and go to:

Advanced → Class Selectors

Add: scramble-text
Then click the check mark to save it.
Showit may display a "." in front of the class name. That's correct.

3. ADD THE JAVASCRIPT

Select the page name in the Pages panel.

Go to:

Advanced Settings → Page Loaded Javascript

Paste the entire Text Scramble Reveal code into the box.

Do not add <script> tags. Showit adds them automatically.

4. PREVIEW YOUR EFFECT

Preview your site from above the text and scroll down to it.

When the text enters the screen, the letters will scramble and then resolve into your original text.

ADJUST THE START DELAY

The Text Scramble effect includes an optional delay before the scrambling begins. This is helpful if you want the effect to coordinate with another animation on your page.

The demo uses a **2.5-second delay** so the curtain has time to open before the text begins scrambling.

Look for this line under **CUSTOMIZE HERE**:

`var delay = 2500;`

Change the number to adjust the delay:

* `0` = starts immediately
* `1000` = 1-second delay
* `2000` = 2-second delay
* `2500` = 2.5-second delay
* `3000` = 3-second delay

**Don't need a delay?** Simply change `2500` to `0`.

You can also use the delay to coordinate the Text Scramble with other Showit animations or entrance effects.

CUSTOMIZE THE DURATION

Find:

var duration = 2000;

This controls how long the entire scramble animation lasts.

2000 = 2 seconds

Increase the number for a longer animation.

Decrease the number for a shorter animation.

For example:

1500 = 1.5 seconds
2500 = 2.5 seconds
3000 = 3 seconds

CUSTOMIZE THE SCRAMBLE SPEED

Find:

var frameRate = 45;

This controls how quickly the random letters change while the text is scrambling.

Lower number = letters change faster

Higher number = letters change slower

For example:

30 = faster letter changes
45 = default
70 = slower letter changes

The duration and scramble speed can be adjusted independently, so you can experiment with both until the animation feels right for your design.

TEXT NOTE

You do not need to add your wording to the code.

Simply change the text directly in Showit and the effect will automatically use whatever text you've entered.

Uppercase letters scramble as uppercase letters, lowercase letters scramble as lowercase letters, and punctuation and numbers remain unchanged.

MOBILE NOTE

The Text Scramble Reveal works on both desktop and mobile and automatically begins when the text scrolls into view.

QUICK INFO

Difficulty: Easy
Requires: Class Selector + Page Loaded Javascript
Class Selector: scramble-text
Trigger: Text enters the screen
Text: Native Showit text
Duration: Customizable
Scramble Speed: Customizable
Mobile: Yes
Coding Knowledge: Not required