Ajax Loader
×
HTML 
 
1
 
2
<div class="boxContainer">
3
        <a href=""><div class="box">Main</div></a>
4
        <a href=""><div class="box">About</div></a>
5
        <a href=""><div class="box">Photo</div></a>
6
        <a href=""><div class="box">Stuff</div></a>
7
        <a href=""><div class="box">Blog</div></a>
8
</div>
9
 
10
 
11
<button id="restart">Restart</button>
12
 
13
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js">
14
</script>
15
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
16
 
 
CSS 
.boxContainer{
1
.boxContainer{
2
  width:100%;
3
  margin:0 auto;
4
  display:block;
5
  text-align:center;
6
  padding:1%;
7
  margin-bottom:20%;
8
}
9
 
10
.box{
11
  background:rgba(252, 18, 18, 1);
12
  display:inline-block;
13
  color:#FAFAFA;
14
  font-family:"Avenir", sans-serif;
15
  text-transform:uppercase;
16
  text-align:center;
17
  padding:1% 3% 1% 3%;
18
  border-radius:5px;
19
}
20
 
21
#restart{
22
  background:#999;
23
  border:none;
24
  color:white;
25
  font-family:"Avenir", sans-serif;
26
  text-transform:uppercase;
27
  font-size:0.9em;
28
  padding:1% 2% 1% 2%;
29
  text-align:center;
30
  display:block;
31
  margin:0 auto;
32
  border-radius:5px;
33
}
 
JavaScript 
var tl = new TimelineLite();
1
var tl = new TimelineLite();
2
 
3
tl.staggerFrom(".box", 0.5, { opacity:0, y:100 }, 0.2)
4
  .staggerTo(".box", 1, { scale:1.2, ease: Elastic.easeOut}, 0.035, "-=0.1");  
5
 
6
 
7
$('#restart').click(function() {
8
  tl.restart();
9
});
10
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
23
 
24
 
 

Animated Navigation bar, GSAP

CSSDeck G+