index.html

<!-- more SplitText demos here: http://codepen.io/collection/KiEhr -->
<link  href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>

  
<div id="nav">
  <button id="chars">chars</button>
  <button id="words">words</button>
  <button id="lines">lines</button>
  <button id="charsWordsLines">chars words and lines</button>
  <button id="revert">revert</button>
</div>  
  
<div id="demo">
  <div id="quote">Let me show you the animation system from the future!</div>
  </div>
</div>
  

script.js

/*

More SplitText demos on Codepen: http://codepen.io/collection/KiEhr

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

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

TweenLite.set($quote, {perspective:700});

//kill any animations and set text back to its pre-split state
function kill(){
  tl.clear().time(0);
  mySplitText.revert();
}

$("#chars").click(function() {
  kill();
  mySplitText.split({type:"chars, words"}) 
  tl.staggerFrom(mySplitText.chars, 0.6, {scale:6, autoAlpha:0,  rotationX:-180,  transformOrigin:"100% 50%", ease:Back.easeOut}, 0.05);
})

$("#words").click(function() {
  kill();
  mySplitText.split({type:"words"}) 
  $(mySplitText.words).each(function(index,el){
    tl.from($(el), 0.6, {opacity:0}, index * 0.01);
    tl.from($(el), 0.6, {scale:index % 2 == 0  ? 0 : 2, ease:Back.easeOut}, index * 0.01); 
  });
})

$("#lines").click(function() {
   kill();
   mySplitText.split({type:"lines"}) 
   tl.staggerFrom(mySplitText.lines, 0.5, {opacity:0, rotationX:-120, transformOrigin:"top center -150"}, 0.1);
 
})

$("#charsWordsLines").click(function() {
  kill();
  mySplitText.split({type:"chars, words, lines"}) 
  tl.staggerFrom(mySplitText.chars, 0.2, {autoAlpha:0, scale:4}, 0.01, 0.5)
    .staggerTo(mySplitText.words, 0.1, {color:"#8FE402", scale:0.9}, 0.1, "words")
    .staggerTo(mySplitText.words, 0.2, {color:"white", scale:1}, 0.1, "words+=0.1")
    .staggerTo(mySplitText.lines, 0.5, {x:100, autoAlpha:0}, 0.2) 
})

//revert the text back to its pre-split state
$("#revert").click(function() {
  mySplitText.revert(); 
})

SplitText:-Multiple-Split-Types.markdown

SplitText: Multiple Split Types

A demo showing multiple split types and effects. More codepen demos here: http://codepen.io/collection/KiEhr/

Forked from GreenSock's Pen SplitText: Multiple Split Types.

A Pen by Secret Sam 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:5% 15% 0 15%;
  overflow:hidden;
}
#demo{
  position:relative;
}
#quote{
  font-size:40px;
  line-height:60px;
  color:#dedede;
}

button{
  padding:10px;
  cursor:pointer;
}

#nav {
  padding-bottom:20px;
}