Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
df27472d by Dan Rempel
Options

CWL modifies big box copy swaps

1 parent 06d25332
Inline Side-by-side
Showing 3 changed files with 34 additions and 19 deletions
...@@ -112,6 +112,9 @@ ...@@ -112,6 +112,9 @@
112 box-sizing: border-box; 112 box-sizing: border-box;
113 } 113 }
114 114
115 #img {
116 position: absolute;
117 }
115 #copy1, #copy2, #copy3{ 118 #copy1, #copy2, #copy3{
116 position: absolute; 119 position: absolute;
117 top: 102px; 120 top: 102px;
...@@ -123,7 +126,7 @@ ...@@ -123,7 +126,7 @@
123 } 126 }
124 #copy3{ 127 #copy3{
125 left: 50px; 128 left: 50px;
126 top: 35px; 129 top: 30px;
127 } 130 }
128 #logo{ 131 #logo{
129 position: absolute; 132 position: absolute;
...@@ -202,16 +205,18 @@ ...@@ -202,16 +205,18 @@
202 var tl = new TimelineMax({repeat:1, repeatDelay:5}); 205 var tl = new TimelineMax({repeat:1, repeatDelay:5});
203 206
204 var leftPos = 490; 207 var leftPos = 490;
205 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 }); 208 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
206 tl.to("#copy1", .7, {opacity:1, delay:0 }); 209 tl.to("#copy1", .7, {opacity:1, delay:0 });
207 210
208 tl.to("#copy1", .7, {opacity:0, delay:4 }); 211 tl.to("#copy1", .7, {opacity:0, delay:4 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.5 }); 212 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
213 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
214 tl.to("#copy2", .7, {opacity:1, delay:0 });
210 215
211 tl.to("#copy2", .7, {opacity:0, delay:4 }); 216 tl.to("#copy2", .7, {opacity:0, delay:3 });
212 tl.to("#img", .7, {opacity:0, delay:0 }); 217 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
213 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 }); 218 tl.to("#img", .7, {left:-300, ease:Power1.easeIn, delay:-.5 });
214 tl.to("#copy3", .7, {opacity:1, delay:-.2 }); 219 tl.to("#copy3", .7, {opacity:1, delay:0 });
215 220
216 console.log( "time: " + tl.totalDuration() ); 221 console.log( "time: " + tl.totalDuration() );
217 } 222 }
......
...@@ -112,6 +112,9 @@ ...@@ -112,6 +112,9 @@
112 box-sizing: border-box; 112 box-sizing: border-box;
113 } 113 }
114 114
115 #img {
116 position: absolute;
117 }
115 #copy1, #copy2, #copy3{ 118 #copy1, #copy2, #copy3{
116 position: absolute; 119 position: absolute;
117 top: 102px; 120 top: 102px;
...@@ -202,16 +205,18 @@ ...@@ -202,16 +205,18 @@
202 var tl = new TimelineMax({repeat:1, repeatDelay:5}); 205 var tl = new TimelineMax({repeat:1, repeatDelay:5});
203 206
204 var leftPos = 490; 207 var leftPos = 490;
205 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 }); 208 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
206 tl.to("#copy1", .7, {opacity:1, delay:0 }); 209 tl.to("#copy1", .7, {opacity:1, delay:0 });
207 210
208 tl.to("#copy1", .7, {opacity:0, delay:4 }); 211 tl.to("#copy1", .7, {opacity:0, delay:4 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.5 }); 212 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
213 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
214 tl.to("#copy2", .7, {opacity:1, delay:0 });
210 215
211 tl.to("#copy2", .7, {opacity:0, delay:4 }); 216 tl.to("#copy2", .7, {opacity:0, delay:3 });
212 tl.to("#img", .7, {opacity:0, delay:0 }); 217 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
213 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 }); 218 tl.to("#img", .7, {left:-300, ease:Power1.easeIn, delay:-.5 });
214 tl.to("#copy3", .7, {opacity:1, delay:-.2 }); 219 tl.to("#copy3", .7, {opacity:1, delay:0 });
215 220
216 console.log( "time: " + tl.totalDuration() ); 221 console.log( "time: " + tl.totalDuration() );
217 } 222 }
......
...@@ -112,6 +112,9 @@ ...@@ -112,6 +112,9 @@
112 box-sizing: border-box; 112 box-sizing: border-box;
113 } 113 }
114 114
115 #img {
116 position: absolute;
117 }
115 #copy1, #copy2, #copy3{ 118 #copy1, #copy2, #copy3{
116 position: absolute; 119 position: absolute;
117 top: 102px; 120 top: 102px;
...@@ -202,16 +205,18 @@ ...@@ -202,16 +205,18 @@
202 var tl = new TimelineMax({repeat:1, repeatDelay:5}); 205 var tl = new TimelineMax({repeat:1, repeatDelay:5});
203 206
204 var leftPos = 490; 207 var leftPos = 490;
205 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 }); 208 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
206 tl.to("#copy1", .7, {opacity:1, delay:0 }); 209 tl.to("#copy1", .7, {opacity:1, delay:0 });
207 210
208 tl.to("#copy1", .7, {opacity:0, delay:4 }); 211 tl.to("#copy1", .7, {opacity:0, delay:4 });
209 tl.to("#copy2", .7, {opacity:1, delay:-.5 }); 212 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
213 tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
214 tl.to("#copy2", .7, {opacity:1, delay:0 });
210 215
211 tl.to("#copy2", .7, {opacity:0, delay:4 }); 216 tl.to("#copy2", .7, {opacity:0, delay:3 });
212 tl.to("#img", .7, {opacity:0, delay:0 }); 217 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
213 tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 }); 218 tl.to("#img", .7, {left:-300, ease:Power1.easeIn, delay:-.5 });
214 tl.to("#copy3", .7, {opacity:1, delay:-.2 }); 219 tl.to("#copy3", .7, {opacity:1, delay:0 });
215 220
216 console.log( "time: " + tl.totalDuration() ); 221 console.log( "time: " + tl.totalDuration() );
217 } 222 }
......