-
Notifications
You must be signed in to change notification settings - Fork 0
/
tween.html
84 lines (72 loc) · 2.75 KB
/
tween.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GreenSock: Basic Tween</title>
<style>
body{
background-color:#000;
}
#demo {
width: 692px;
height: 300px;
background-color: #333;
padding: 8px;
}
#pikachu {
position: relative;
width: 60px;
height: 60px;
margin-top:240px;
background: url(http://cdn.bulbagarden.net/upload/7/77/Spr_1y_025.png) no-repeat;
}
#pokeball {
position: relative;
width: 24px;
height: 24px;
background: url(http://cdn.bulbagarden.net/upload/9/93/Bag_Pok%C3%A9_Ball_Sprite.png) no-repeat;
}
</style>
</head>
<body>
<div id="demo">
<div id="pikachu"></div>
<div id="pokeball"></div>
</div>
<!--- The following scripts are necessary to do TweenLite tweens on CSS properties -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!-- TweenMax grabs all tween dependancies, or you can grab them induvidually -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<!-- those less cool dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<script>
//we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one.
window.onload = function(){
var pikachu = document.getElementById("pikachu");
TweenLite.to(pikachu, 1, {left:"632px"});
// var tl = new TimelineLite(yoyo:true);
// tl.to(pokeball, .5, {top:"-150px"})
// .to(pikachu, .5, {top:"-150px"})
// .to(pokeball, .5, {top:"-10px"})
// .to(pikachu, .5, {top:"-10px"});
var pokeball = document.getElementById("pokeball");
TweenLite.to(pokeball, 2, {left:"632px", delay: 1});
TweenMax.to(pokeball, .2, {top:"-50px", delay: 1});
TweenMax.to(pokeball, .2, {top:"-90px", delay: 1.2});
TweenMax.to(pokeball, .2, {top:"-120px", delay: 1.4});
TweenMax.to(pokeball, .2, {top:"-140px", delay: 1.6});
TweenMax.to(pokeball, .2, {top:"-150px", delay:1.8});
TweenMax.to(pokeball, .2, {top:"-140px", delay: 2.0});
TweenMax.to(pokeball, .2, {top:"-120px", delay: 2.2});
TweenMax.to(pokeball, .2, {top:"-90px", delay: 2.4});
TweenMax.to(pokeball, .2, {top:"-50px", delay: 2.6});
TweenMax.to(pokeball, .2, {top:"-10px", delay: 2.8});
TweenMax.to(pokeball, 2, {left:"0px", delay: 3});
TweenLite.to(pikachu, 2, {left:"0px", delay: 3});
tl.play();
}
</script>
</body>
</html>