Titile animations

by Geoffrey Gazet

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div id="main">
  <h1 id="heading">Hi-there </h1>
</div>  

<a href="http://codepen.io/mjarosinski/pen/XJrvEq/">See this pen</a>

CSS

body {
  padding: 50px;
}

h1 {
  font-size: 3em;
  font-family: sans-serif;
}

.char {
  position: relative;
  display: inline-block;
}

JavaScript

var Pen = {
};

Pen.init = function(){
  
  CSSPlugin.defaultTransformPerspective = 500;
  var headingHtml = $("#heading").html();
  var output = "";
  _.each(headingHtml.split(""), function(item){
    output += "<span class=\"char\">" + item + "</span>";
    
  });
  
  console.log(output);
  $("#heading").html(output);
  Pen.doTween();
};

Pen.doTween = function(){
  
  _.each($(".char"), function(item){
    var tmp = Math.random();
    TweenMax.from(item, (tmp*1)+1.5, {
      "delay": 0.5,
      "opacity": 0.0,
      "z": 1700 + (600*tmp)
    });
  });
  
  //_.delay(Pen.doTween, 3000);
};

$(document).ready(function(){
  Pen.init();
});