<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:2rem;
  background-color:#1d1d1d;
}

.demo {
  font-family: Signika Negative, sans-serif;
  font-weight: 300;
  color:#989898; 
  padding:10px;
  height: 100vh;
  font-size:3vw;
  line-height:1.4,
}
#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});