Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
372a8eeb by Jeremy Groot
Options

animation updates

1 parent 183d59a7
Inline Side-by-side
Showing 1 changed file with 23 additions and 8 deletions
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
54 width: 300px; 54 width: 300px;
55 height: 250px; 55 height: 250px;
56 border: none; 56 border: none;
57 background:#b3b3b3; 57 background:white;
58 overflow: hidden; 58 overflow: hidden;
59 cursor: pointer; 59 cursor: pointer;
60 box-sizing: border-box; 60 box-sizing: border-box;
...@@ -87,9 +87,11 @@ ...@@ -87,9 +87,11 @@
87 width:155px; 87 width:155px;
88 } 88 }
89 #img1 { 89 #img1 {
90 transform: scale(0);
90 -webkit-box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2); 91 -webkit-box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2);
91 -moz-box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2); 92 -moz-box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2);
92 box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2); 93 box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2);
94 top:-85px;
93 } 95 }
94 #img2 { 96 #img2 {
95 position: absolute; 97 position: absolute;
...@@ -125,18 +127,31 @@ ...@@ -125,18 +127,31 @@
125 127
126 <script> 128 <script>
127 129
128 var tl = new TimelineMax({repeat:0, repeatDelay:5}); 130 var tl = new TimelineMax({repeat:1, repeatDelay:5});
129 131
130 function stage1(){ 132 function stage1(){
131 133
132 tl.to("#txt1", 2, {opacity:1, delay:0.5 }); 134 // tl.to("#txt1", 2, {opacity:1, delay:0.5 });
135 // tl.to("#txt1", 0.7, {opacity:0, delay:1 }, 'text_animation');
136 // tl.to("#txt2", 1, {opacity:1, css:{top:"65px"}, delay:1 }, 'text_animation');
137 // tl.to("#txt2", 0.7, {opacity:0, delay:4 }, "text_animation");
138 // tl.to("#img2", 1, {top:'20px', delay:4}, "text_animation");
139 // tl.to("#img2", 1.5, {css:{scale:0.43,top:"10px"}, delay:2}, "scale_animation");
140 // tl.to("#img1", 1.5, {css:{scale:0.43,top:"-85px"}, delay:2}, "scale_animation");
141 // tl.to("#txt3", 0.5, {css:{bottom:"12px"}, delay:3}, "scale_animation");
142
143
144 tl.to("#img1", 0.7, {css:{scale:1,top:0}, delay:0.5 });
145 tl.to("#txt1", 1.5, {opacity:1, delay:0 });
133 tl.to("#txt1", 0.7, {opacity:0, delay:1 }, 'text_animation'); 146 tl.to("#txt1", 0.7, {opacity:0, delay:1 }, 'text_animation');
134 tl.to("#txt2", 1, {opacity:1, css:{top:"65px"}, delay:1 }, 'text_animation'); 147 tl.to("#txt2", 0.7, {opacity:1, css:{top:"65px"}, delay:1 }, 'text_animation');
135 tl.to("#txt2", 0.7, {opacity:0, delay:4 }, "text_animation"); 148 tl.to("#txt2", 0.7, {opacity:0, delay:4 }, "text_animation");
136 tl.to("#img2", 1, {top:'20px', delay:4}, "text_animation"); 149 tl.to("#img2", 0.7, {top:'20px', delay:4}, "text_animation");
137 tl.to("#img2", 1.5, {css:{scale:0.43,top:"10px"}, delay:2}, "scale_animation"); 150 tl.to('#border', 0, {css:{background:'#b3b3b3'}}, 'scale_animation');
138 tl.to("#img1", 1.5, {css:{scale:0.43,top:"-85px"}, delay:2}, "scale_animation"); 151 tl.to("#img2", 0.7, {css:{scale:0.43,top:"10px"}, delay:1.5}, "scale_animation");
139 tl.to("#txt3", 0.5, {css:{bottom:"12px"}, delay:3}, "scale_animation"); 152 tl.to("#img1", 0.7, {css:{scale:0.43,top:"-85px"}, delay:1.5}, "scale_animation");
153 tl.to("#txt3", 0.5, {css:{bottom:"12px"}, delay:2.2}, "scale_animation");
154
140 155
141 } 156 }
142 157
......