SplitText: Character Animation with staggers

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

​

<h1 id="quote">SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is wrapped in its own div tag.</h1>

​

<button id="animate">animate</button>

​

​

body{

  font-family: 'Asap', Arial, Helvetica, sans-serif;

  color:white;

  background:black url(//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;

  margin:3% 10% 0 10%;

  overflow:hidden;

}

​

#quote{

  font-size:44px;

  line-height:50px;

  color:#dedede;

  font-weight: 300;

}

​

button {

  padding:10px;

  margin: 20px 0;

}

/*

See https://www.greensock.com/splittext/ for details. 

This demo uses SplitText which is a membership benefit of Club GreenSock, https://www.greensock.com/club/

*/

gsap.registerPlugin(SplitText);

​

var tl = gsap.timeline(),

  mySplitText = new SplitText("#quote", { type: "words,chars" }),

  chars = mySplitText.chars; //an array of all the divs that wrap each character

​

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

​

console.log(chars);

​

tl.from(chars, {

  duration: 0.8,

  opacity: 0,

  scale: 0,

  y: 80,