Animated Navigation bar, GSAP



Animated Navigation bar, GSAP




 
<div class="boxContainer">
				<a href=""><div class="box">Main</div></a>
				<a href=""><div class="box">About</div></a>
				<a href=""><div class="box">Photo</div></a>
				<a href=""><div class="box">Stuff</div></a>
				<a href=""><div class="box">Blog</div></a>				
</div>


<button id="restart">Restart</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                    
                  
                



 .boxContainer{
	width:100%;
	margin:0 auto;
	display:block;
	text-align:center;
	padding:1%;
  margin-bottom:20%;
}

.box{
	background:rgba(252, 18, 18, 1);
	display:inline-block;
	color:#FAFAFA;
	font-family:"Avenir", sans-serif;
	text-transform:uppercase;
	text-align:center;
	padding:1% 3% 1% 3%;
	border-radius:5px;
}

#restart{
  background:#999;
  border:none;
  color:white;
  font-family:"Avenir", sans-serif;
  text-transform:uppercase;
  font-size:0.9em;
  padding:1% 2% 1% 2%;
  text-align:center;
  display:block;
  margin:0 auto;
  border-radius:5px;
}                
              



var tl = new TimelineLite();

tl.staggerFrom(".box", 0.5, { opacity:0, y:100 }, 0.2)
  .staggerTo(".box", 1, { scale:1.2, ease: Elastic.easeOut}, 0.035, "-=0.1");   


$('#restart').click(function() {
  tl.restart();
});