<link href='//fonts.googleapis.com/css?family=Signika+Negative:300' rel='stylesheet' type='text/css'>

<div class="demo">
  <div id="textblock">
    <div id="scramble"></div>
    <span id="charsCustom"></span> 
    <span id="charsNumbers"></span><br>
    <span id="charsUppercase"></span>
    <span id="charsLowercase"></span>
    <div id="newClass"></div>
  </div>
</div>

body {
  margin:0;
}

.demo {
  background-color:#1d1d1d;
  font-family: Signika Negative, sans-serif;
  font-weight: 300;
  color:#989898; 
  padding:10px;
  
  font-size:20px;
  line-height:30px;
}
#textblock {
  height:140px;
}

.orange {
  color:#f60;
}
var tl = gsap.timeline({defaults: {duration: 2, ease: "none"}});

tl.to("#scramble", {duration: 3, scrambleText:{text:"ScrambleText allows you to animate the scrambling of text.", chars:"lowerCase", revealDelay:0.5, tweenLength:false}})

.to("#charsCustom", {duration: 4, scrambleText:{text:"Specify a set of characters to scramble like 'XO'", chars:"XO", revealDelay:1, tweenLength:false, speed:0.4}})

.to("#charsNumbers", {duration: 4, scrambleText:{text:"or use only numbers,", chars:"0123456789"}})

.to("#charsUppercase", {scrambleText:{text:"UPPERCASE", chars:"upperCase",  speed:0.3}})

.to("#charsLowercase", {scrambleText:{text:"or lowercase.", chars:"lowerCase", speed:0.3}})

.to("#newClass", {scrambleText:{text:"Even apply a custom class to the text.", chars:"lowerCase", speed:0.3, newClass:"orange", revealDelay:0.5, tweenLength:false}})

GSDevTools.create({animation: tl, minimal: true});

External CSS

  1. https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js