Skip to main content

ScrambleText

Club GSAP plugin

Quick Start

Trial URL

ScrambleTextPlugin is a Club GSAP perk, join today or grab this trial URL to take it for a spin for free.  Works on localhost, Codepen, CodeSandbox and Stackblitz.

gsap.registerPlugin(ScrambleTextPlugin)

Minimal usage

gsap.to(element, {
  duration: 1, 
  scrambleText: "THIS IS NEW TEXT"
});

loading...

Description​

Scrambles the text in a DOM element with randomized characters (uppercase by default, but you can define lowercase or a set of custom characters), refreshing new randomized characters at regular intervals while gradually revealing your new text (or the original text) over the course of the tween (left to right by default). Visually it looks like a computer decoding a string of text. Great for rollovers.

You can simply pass a string of text directly as the scrambleText and it'll use the defaults for revealing it, or you can customize the settings by using a generic object with any of the following properties:

    Property

    Description

  • text

    String - The text that should replace the existing text in the DOM element. If omitted (or if "{original}"), the original text will be used.

  • chars

    String - The characters that should be randomly swapped in to the scrambled portion the text. You can use "upperCase", "lowerCase", "upperAndLowerCase", or a custom string of characters, like "XO" or "TMOWACB", or "jompaWB!^", etc. Default: "upperCase".

  • tweenLength

    Boolean - If the length of the replacement text is different than the original text, the difference will be gradually tweened so that the length doesn’t suddenly jump. For example, if the original text is 50 characters and the replacement text is 100 characters, during the tween the number of characters would gradually move from 50 to 100 instead of jumping immediatley to 100. However, if you’d prefer to have it immediately jump, set tweenLength to false. Default: true.

  • revealDelay

    Number - If you’d like the reveal (unscrambling) of the new text to be delayed for a certain portion of the tween so that the scrambled text is entirely visible for a while, use revealDelay to define the time you’d like to elapse before the reveal begins. For example, if the tween’s duration is 3 seconds but you’d like the scrambled text to remain entirely visible for first 1 second of the tween, you’d set revealDelay to 1. Default: 0.

  • newClass

    String - If you’d like the new text to have a particular class applied (using a tag wrapped around it), use newClass: "YOUR_CLASS_NAME". This makes it easy to create a distinct look for the new text. Default: null.

  • oldClass

    String - If you’d like the old (original) text to have a particular class applied (using a tag wrapped around it), use oldClass: "YOUR_CLASS_NAME". This makes it easy to create a distinct look for the old text. Default: null.

  • speed

    Number - Controls how frequently the scrambled characters are refreshed. The default is 1 but you could slow things down by using 0.2 for example (or any number). Default: 1.

  • delimiter

    String - By default, each character is replaced one-by-one, but if you’d prefer to have things revealed word-by-word, you could use a delimiter of " " (space). Default: "".

  • rightToLeft

    Boolean - If true the text will be revealed from right to left. Default: false.

Usage​

//use the defaults
gsap.to(element, {duration: 1, scrambleText: "THIS IS NEW TEXT"});//or customize things:

gsap.to(element, {
  duration: 1, 
  scrambleText: {
    text: "THIS IS NEW TEXT", 
    chars: "XO", 
    revealDelay: 0.5, 
    speed: 0.3, 
    newClass: "myClass"
  }
});

ScrambleTextPlugin is a Club GSAP membership benefit. You must have a valid membership to use this class without violating the terms of use. Visit the club page to sign up or get more details.

ScrambleTextPlugin and other bonus plugins are not hosted on a CDN. Checkout our CDN FAQs for more info.

Demos​

FAQ's​

How do I include ScrambleTextPlugin in my project?

See the installation page for all the options (CDN, NPM, download, etc.) where there's even an interactive helper that provides the necessary code. Easy peasy. Don't forget to register ScrambleTextPlugin like this in your project:

gsap.registerPlugin(ScrambleTextPlugin)

Is this included in the GSAP core?

No, you must load/import it separately

Is this only for Club GSAP members?

Yes. It's our way of saying "Thank you" to those who support our efforts. If you're not a member, what are you waiting for? Satisfaction is guaranteed or your money back. Take your animation skills to the next level. If you're already a member, you can download GSAP along with this and the other bonus plugins from your account dashboard. See the installation page for details about how to get it into your project via a <script> tag or NPM, Yarn, etc.

Can I try ScrambleTextPlugin out for free?

You betcha! There's a trial (but fully-functional) version of ScrambleTextPlugin that you can use on Codepen as much as you want for free. Get the URLs here. It's a fantastic way to experiment. Note: the trial version of the plugins will only work on the CodePen domain.

It works fine during development, but suddenly stops working in the production build! What do I do?

Your build tool is probably dropping the plugin when tree shaking and you forgot to register ScrambleTextPlugin (which protects it from tree shaking). Just register the plugin like this:

gsap.registerPlugin(ScrambleTextPlugin)

Is it bad to register a plugin multiple times?

No, it's perfectly fine. It doesn't help anything, nor does it hurt.

Contents