index.html

<link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>

<div id="quote">What does the fox say?</div>


  
  
  
  
  
  
  
  
  

script.js

/*
See http://www.greensock.com/splittext/ for details. 
This demo uses SplitText which is a membership benefit of Club GreenSock, http://www.greensock.com/club/
*/

TweenLite.set("#quote", {perspective:400});

var mySplitText = new SplitText("#quote", {type:"chars,words", position:"absolute"}),
    tl = new TimelineLite();

	


var numChars = mySplitText.chars.length;

for(var i = 0; i < numChars; i++){
  tl.from(mySplitText.chars[i],0.2, {y:getRandomInt(-75, 300), x:getRandomInt(-150, 300), rotation:getRandomInt(0, 720), rotationX:-90}, i * 0.1);
}
		



function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

SplitText:-Random-Character-Animation.markdown

SplitText: Random Character Animation

Part of the SplitText Collection

A Pen by GreenSock on CodePen.

License.

style.css

body{
  font-family: 'Asap', Arial, Helvetica, sans-serif;
  color:white;
  background:black url(http://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
  margin:1% 10% 0 10%;
  overflow:hidden;
}

#quote{
  -webkit-transform: translate3d(0, 0, 0);
  font-size:44px;
  line-height:50px;
  color:#dedede;
}

#quote div{
  -webkit-font-smoothing: antialiased;
	-moz-font-smoothing:antialiased;
}