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

<div 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.</div>

<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;
}

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/
*/

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});

tl.from(chars, {duration: 0.8, opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:"back", stagger: 0.01}, "+=0");



document.getElementById("animate").onclick = function() {
  tl.restart();
}




External CSS

This Pen doesn't use any external CSS resources.

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/SplitText3.min.js