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 @@
width: 300px;
height: 250px;
border: none;
background:#b3b3b3;
background:white;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
......@@ -87,9 +87,11 @@
width:155px;
}
#img1 {
transform: scale(0);
-webkit-box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2);
-moz-box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2);
box-shadow: -8px 13px 23px -2px rgba(0,0,0,0.2);
top:-85px;
}
#img2 {
position: absolute;
......@@ -125,18 +127,31 @@
<script>
var tl = new TimelineMax({repeat:0, repeatDelay:5});
var tl = new TimelineMax({repeat:1, repeatDelay:5});
function stage1(){
tl.to("#txt1", 2, {opacity:1, delay:0.5 });
// tl.to("#txt1", 2, {opacity:1, delay:0.5 });
// tl.to("#txt1", 0.7, {opacity:0, delay:1 }, 'text_animation');
// tl.to("#txt2", 1, {opacity:1, css:{top:"65px"}, delay:1 }, 'text_animation');
// tl.to("#txt2", 0.7, {opacity:0, delay:4 }, "text_animation");
// tl.to("#img2", 1, {top:'20px', delay:4}, "text_animation");
// tl.to("#img2", 1.5, {css:{scale:0.43,top:"10px"}, delay:2}, "scale_animation");
// tl.to("#img1", 1.5, {css:{scale:0.43,top:"-85px"}, delay:2}, "scale_animation");
// tl.to("#txt3", 0.5, {css:{bottom:"12px"}, delay:3}, "scale_animation");
tl.to("#img1", 0.7, {css:{scale:1,top:0}, delay:0.5 });
tl.to("#txt1", 1.5, {opacity:1, delay:0 });
tl.to("#txt1", 0.7, {opacity:0, delay:1 }, 'text_animation');
tl.to("#txt2", 1, {opacity:1, css:{top:"65px"}, delay:1 }, 'text_animation');
tl.to("#txt2", 0.7, {opacity:1, css:{top:"65px"}, delay:1 }, 'text_animation');
tl.to("#txt2", 0.7, {opacity:0, delay:4 }, "text_animation");
tl.to("#img2", 1, {top:'20px', delay:4}, "text_animation");
tl.to("#img2", 1.5, {css:{scale:0.43,top:"10px"}, delay:2}, "scale_animation");
tl.to("#img1", 1.5, {css:{scale:0.43,top:"-85px"}, delay:2}, "scale_animation");
tl.to("#txt3", 0.5, {css:{bottom:"12px"}, delay:3}, "scale_animation");
tl.to("#img2", 0.7, {top:'20px', delay:4}, "text_animation");
tl.to('#border', 0, {css:{background:'#b3b3b3'}}, 'scale_animation');
tl.to("#img2", 0.7, {css:{scale:0.43,top:"10px"}, delay:1.5}, "scale_animation");
tl.to("#img1", 0.7, {css:{scale:0.43,top:"-85px"}, delay:1.5}, "scale_animation");
tl.to("#txt3", 0.5, {css:{bottom:"12px"}, delay:2.2}, "scale_animation");
}
......