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 37 additions and 22 deletions
......@@ -112,6 +112,9 @@
box-sizing: border-box;
}
#img {
position: absolute;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 102px;
......@@ -123,7 +126,7 @@
}
#copy3{
left: 50px;
top: 35px;
top: 30px;
}
#logo{
position: absolute;
......@@ -202,16 +205,18 @@
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var leftPos = 490;
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
tl.to("#copy1", .7, {opacity:1, delay:0 });
tl.to("#copy1", .7, {opacity:0, delay:4 });
tl.to("#copy2", .7, {opacity:1, delay:-.5 });
tl.to("#copy2", .7, {opacity:0, delay:4 });
tl.to("#img", .7, {opacity:0, delay:0 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
tl.to("#copy3", .7, {opacity:1, delay:-.2 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
tl.to("#copy2", .7, {opacity:1, delay:0 });
tl.to("#copy2", .7, {opacity:0, delay:3 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
tl.to("#img", .7, {left:-300, ease:Power1.easeIn, delay:-.5 });
tl.to("#copy3", .7, {opacity:1, delay:0 });
console.log( "time: " + tl.totalDuration() );
}
......
......@@ -112,6 +112,9 @@
box-sizing: border-box;
}
#img {
position: absolute;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 102px;
......@@ -202,16 +205,18 @@
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var leftPos = 490;
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
tl.to("#copy1", .7, {opacity:1, delay:0 });
tl.to("#copy1", .7, {opacity:0, delay:4 });
tl.to("#copy2", .7, {opacity:1, delay:-.5 });
tl.to("#copy2", .7, {opacity:0, delay:4 });
tl.to("#img", .7, {opacity:0, delay:0 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
tl.to("#copy3", .7, {opacity:1, delay:-.2 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
tl.to("#copy2", .7, {opacity:1, delay:0 });
tl.to("#copy2", .7, {opacity:0, delay:3 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
tl.to("#img", .7, {left:-300, ease:Power1.easeIn, delay:-.5 });
tl.to("#copy3", .7, {opacity:1, delay:0 });
console.log( "time: " + tl.totalDuration() );
}
......
......@@ -112,6 +112,9 @@
box-sizing: border-box;
}
#img {
position: absolute;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 102px;
......@@ -202,16 +205,18 @@
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var leftPos = 490;
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
tl.to("#copy1", .7, {opacity:1, delay:0 });
tl.to("#copy1", .7, {opacity:0, delay:4 });
tl.to("#copy2", .7, {opacity:1, delay:-.5 });
tl.to("#copy2", .7, {opacity:0, delay:4 });
tl.to("#img", .7, {opacity:0, delay:0 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
tl.to("#copy3", .7, {opacity:1, delay:-.2 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:0 });
tl.to("#copy2", .7, {opacity:1, delay:0 });
tl.to("#copy2", .7, {opacity:0, delay:3 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-.4 });
tl.to("#img", .7, {left:-300, ease:Power1.easeIn, delay:-.5 });
tl.to("#copy3", .7, {opacity:1, delay:0 });
console.log( "time: " + tl.totalDuration() );
}
......