<link href='//fonts.googleapis.com/css?family=Signika+Negative:300' rel='stylesheet' type='text/css'>
<div id="demo">
  <div id="bg">
    <div id="text">Impossible with CSS Animation.</div>
  </div>
</div>
<div id="slider"></div>
<div id="controls">
  <button id="ctrl_restartBtn">restart()</button>
  <button id="ctrl_pauseBtn">pause()</button>
  <button id="ctrl_resumeBtn">resume()</button>
  <button id="ctrl_reverseBtn">reverse()</button>
  <button id="ctrl_playBtn">play()</button>
  <button id="ctrl_playFromBtn">play(1.5)</button>
  <button id="ctrl_reverseFromBtn">reverse(5)</button>
  <button id="ctrl_seekBtn">seek(3)</button><br>
  <button id="ctrl_timeScaleSlowBtn">timeScale(0.25)</button>
  <button id="ctrl_timeScaleNormalBtn">timeScale(1)</button>
  <button id="ctrl_timeScaleFastBtn">timeScale(2)</button>

  
</div>

body {
  font-family: Signika Negative, sans-serif;
  font-weight: 300;
  color: white;
  background-color: black;
  text-align: center;
}
#demo {
  text-align: center;
  margin-top:20px;
}
#bg {
	  background-color:#000;
  position:relative;
	  overflow:hidden;
  display:inline-block;
	  width:500px;
	  height:70px;
	  border-radius: 8px;
	  border: 2px solid #777;
}	
#text {
  	position:absolute;
  	text-align:center;
  	width:500px;
  	height:70px;
	  line-height:68px;
  font-size: 28px;
}		
#text span {
	  -webkit-font-smoothing: antialiased;
	  -moz-font-smoothing:antialiased;
  	position:relative;
	  display:inline-block;
	  color:#FFF;
}	 
#slider {
  display: inline-block;
	  width: 500px;
	  height:12px;
	  margin:8px 0px 8px 6px;	
}
#controls button {
  //width: 90px;
}
#controls input {
	  display:inline;
	  padding:2px;
	  margin:2px;
}

var $text = $("#text"),
    $playBtn = $("#ctrl_playBtn"),
		$pauseBtn = $("#ctrl_pauseBtn"),
		$resumeBtn = $("#ctrl_resumeBtn"),
		$reverseBtn = $("#ctrl_reverseBtn"),
		$playFromBtn = $("#ctrl_playFromBtn"),
		$reverseFromBtn = $("#ctrl_reverseFromBtn"),
		$seekBtn = $("#ctrl_seekBtn"),
		$timeScaleSlowBtn = $("#ctrl_timeScaleSlowBtn"),
		$timeScaleNormalBtn = $("#ctrl_timeScaleNormalBtn"),
		$timeScaleFastBtn = $("#ctrl_timeScaleFastBtn"),
		$restartBtn = $("#ctrl_restartBtn"),
   
   
    $slider = $("#slider"),
    //"tl" is the timeline we'll add our tweens to. Then we can easily control the whole sequence as one object. 
    tl = new TimelineLite({onUpdate:updateSlider,  paused:true});

function updateSlider() {
  $slider.slider("value", tl.progress() * 100);
}


//do a simple split of the text so we can animate each character (doesn't require the advanced features of SplitText, so we just use split() and join())
$text.html("<span>" + $text.html().split("").join("</span><span>").split("<span> </span>").join("<span>&nbsp;</span>") + "</span>");

//set a perspective on the container
TweenLite.set($text, {perspective:500});

//all of the animation is created in this one line:
tl.staggerTo($("#text span"), 4, {transformOrigin:"50% 50% -30px", rotationY:-360, rotationX:360, rotation:360, ease:Elastic.easeInOut}, 0.02);

//slider and button controls from here on...
$slider.slider({
		  range: false,
		  min: 0,
		  max: 100,
		  step:.1,
  		slide: function (event, ui) {
			    tl.progress( ui.value / 100 ).pause();
   
  		}
});
		
$playBtn.click(function(){
  if (tl.time() === tl.duration()) {
    tl.restart();
  } else {
    tl.play();
  }
});
$pauseBtn.click(function(){
  tl.pause();
});
$resumeBtn.click(function(){
  if ((!tl.reversed() && tl.time() === tl.duration()) || (tl.reversed() && tl.time() === 0)) {
    tl.restart();
  } else {
    tl.resume();
  }
});
$reverseBtn.click(function() {
  if (tl.time() === 0) {
    tl.reverse(0);
  } else {
    tl.reverse();
  }
});
$playFromBtn.click(function(){
  tl.play(1.5);
});
$reverseFromBtn.click(function(){
  tl.reverse(5);
});
$seekBtn.click(function(){
  tl.seek(3);
});
$timeScaleSlowBtn.click(function(){
  tl.timeScale(0.25);
  if (tl.time() === tl.duration()) {
    tl.restart();
  }
});
$timeScaleNormalBtn.click(function(){
  tl.timeScale(1);
  if (tl.time() === tl.duration()) {
    tl.restart();
  }
});
$timeScaleFastBtn.click(function(){
  tl.timeScale(2);
  if (tl.time() === tl.duration()) {
    tl.restart();
  }
});
$restartBtn.click(function(){
  tl.restart();
});