//// PATH VARIABLES ////
-vb="0 0 500 500"
-red="M356.5,208.5c13.3-22.7,20-36,20-60c0-17.3,7-31.7,13.7-45c25.3-37.3-16-54.7-16-54.7 c-34.7-17.3-37.3-1.3-57.3,25.3c-12,16-18.4,19.8-36,29.3c-27.4,14.9-62.7,80-62.7,80s13.3,10.7,9.3,18.7s2.7,25.3,12,28 c9.3,2.7,26.7,6.7,29.3,16c2.7,9.3,6.7,13.3,28,13.3c8-1.3,21.7-6.7,29.7-2.7L356.5,208.5z"
-blue="M218.2,184.8l-45.3,73.3c0,0,9.3,16,6.7,21.3s-14.7,24,5.3,34.7c12,2.7,19.3-8.9,32,9.3 c10.7,15.3,30.7,18.7,48-2.7c6.7,0,14.3,3.7,19.7-3c5.3-6.7,46.7-70.3,46.7-70.3L218.2,184.8z"
-white="M176.5,253.8l-30.3,49.7c0,0-10.7,18.7-2.7,32c-1.3,4-10.7,22.7,6.7,38.7 c6.7,1.3,21.3,5.3,26.7,13.3c5.3,8,20,8.7,29.3,6c4-4,10.7-4,17.3-1.3c8,2.7,12-0.7,21.3-15.3c9.3-14.7,42.7-65.3,42.7-65.3 L176.5,253.8z"
-shadow="M151.5,370.8c0,0,124.2-193.4,134.7-212c10.7-14.7,28-26.7,33.3-24c5.3,2.7,5.3,24-6.7,42.7 c-14,21.8-137.3,206.7-137.3,206.7S167.5,373.5,151.5,370.8z M220.8,386.8c0,0,113.3-169.3,126.7-190.7s4-34.7,4-22.7s-24,44-24,44 l-112,166.7L220.8,386.8z M270.2,136.2c10.7-10.7,17.3-13.3,12-14.7c-5.3-1.3-13.3,8-28,22.7c-14.7,14.7-98.7,154.7-105.3,168 c-6.7,13.3-4,18.7-4,18.7S259.5,146.8,270.2,136.2z"
-highlight="M348.5,68.8c-8-9.3-8-20-2.7-17.3c0,0,8,13.3,28,21.3S356.5,78.2,348.5,68.8z M255.2,166.2 c6.7-4,18.7,1.3,16,10.7c-2.7,9.3,13.3-16,13.3-16s-20,5.3-14.7-5.3c5.3-10.7,13.1-17.4,14.7-21.3c7-17.4-3.5-6.9-3.5-6.9 s-26.7,23.2-41.8,57.6C227.8,210.8,248.5,170.2,255.2,166.2z M313.8,107.5c9-6.9,23.4-20.1,15.9-21.8c-1.9-0.4-4.1-0.9-10.9,8.4 c-2.2,3-5.9,6.4-11.7,9.6S304.8,114.4,313.8,107.5z M145.3,333.3v1.3c0,0,1.2,3.8-1.5,14.5s88.7-151,88.4-152.2 C230.9,190.3,145.3,333.3,145.3,333.3z M314.2,178.5c-7.6,3.9-134.4,204.8-134.4,204.8c2.7,9.3,12.4-5.1,12.4-5.1 s77.7-125,122.7-193.3C319.9,177.1,315.2,178,314.2,178.5z M256.2,352.1l-28.5,37.6c0,2.7,7.4,1.8,15.4-8.9 c3.4-4.5,9.6-15.7,15.7-27.1C259.8,351.9,257.3,350.4,256.2,352.1z"
-stick="M152.8,390.2c-10.7,17.3-21.3,34.7-21.3,34.7s-14.7,16,0,24c11.6,6.3,20-8,20-8l26.7-44 C178.2,396.8,161.9,375.4,152.8,390.2z"
-stickshdw="M160.8,370.5l-37.6,59.7c0,0-8.5,12,4.2,18.7s22.6-6.7,22.6-6.7l36.2-57 C186.2,385.2,179.1,366.5,160.8,370.5z"
-drip1="M230.6,405.1c-3,0-5.5-4-5.5-9s2.4-9,5.5-9s5.5,4,5.5,9S233.6,405.1,230.6,405.1z"
-drip2="M267.5,359.2c-3,0-5.5-4-5.5-9c0-5,2.4-9,5.5-9s5.5,4,5.5,9C273,355.1,270.5,359.2,267.5,359.2z"
-drip3="M300.8,299.2c-3,0-5.5-4-5.5-9c0-5,2.4-9,5.5-9c3,0,5.5,4,5.5,9 C306.3,295.1,303.9,299.2,300.8,299.2z"
//// HTML ////
#box
//POP
svg#pop(viewBox=vb)
//STICK
path.stick-shdw(d=stickshdw)
path.stick(d=stick)
//RED WHITE BLUE
path.white(d=white)
path.blue(d=blue)
path.red(d=red)
//SHADOW HIGHLIGHT
path.shadow(d=shadow)
path.highlight(d=highlight)
//DRIP DROPS
path.drip1(d=drip1)
path.drip2(d=drip2)
path.drip3(d=drip3)
defs
//SHADOW GRADIENT
linearGradient#grad1(x1="180" y1="360" x2="340" y2="130" gradientUnits="userSpaceOnUse")
stop.g1(offset="0")
stop.g2(offset="0.1")
stop.g3(offset="1")
defs
//HIGHLIGHT GRADIENT
radialGradient#grad2(cx="540" cy="270" r="300" gradientUnits="userSpaceOnUse")
stop.g3(offset="0")
stop.g4(offset="0.4")
stop.g5(offset="0.4")
//// CSS VARIABLES ////
c-red = #D83137
c-blue = #18A3D7
c-white = #E6E7E8
c-stick = #F4D5A3
c-stick-shdw = #D9B580
//STAGE
#box
position absolute
width 550px
height 550px
top 50%
left 50%
margin-top -(@height / 2)
margin-left -(@width / 2)
svg
overflow visible
// SHAPES
.red
fill c-red
.blue
fill c-blue
.white
fill c-white
.stick
fill c-stick
.stick-shdw
fill c-stick-shdw
.drip1
fill c-white
opacity: 0
.drip2
fill c-blue
opacity: 0
.drip3
fill c-red
opacity: 0
.shadow
fill:url(#grad1)
.highlight
fill:url(#grad2)
//GRADIENTS
stop
&.g1
stop-color #FFFFFF
stop-opacity 0
&.g2
stop-color #43445D
stop-opacity 0
&.g3
stop-color #AE2E3A
&.g4
stop-color #FFFFFF
stop-opacity 0.2
&.g5
stop-color #FFFFFF
stop-opacity 0.15
&.g6
stop-color #FFFFFF
stop-opacity 0.2
//
body
margin 0
padding 0
overflow hidden
background darken(desaturate(navy,84%),32%)
//// GSAP VARIABLES ////
var Box = $('#box');
var Drip1 = $('.drip1');
var Drip2 = $('.drip2');
var Drip3 = $('.drip3');
//// SNAP VARIABLES ////
var s = Snap('#pop');
var red = s.select('.red');
var blue = s.select('.blue');
var white = s.select('.white');
//// GSAP ////
var tl = new TimelineMax();
tl.to(Box, 0.65, {
onStart: function() {
red1();
}
});
tl.to(Box, 0.65, {
onStart: function() {
red2();
}
});
tl.to(Box, 0.65, {
onStart: function() {
blue1();
}
});
tl.to(Box, 0.65, {
onStart: function() {
blue2();
}
});
tl.to(Box, 0.65, {
onStart: function() {
white1();
}
});
tl.to(Box, 0.65, {
onStart: function() {
white2();
}
});
tl.to(Box, 0.65, {
onComplete: function() {
tl.restart();
}
});
//// SNAP SVG ////
function red1() {
red.animate({
'path': 'M356.5,208.5c13.3-22.7,20-36,20-60c0-17.3,7-31.7,13.7-45c25.3-37.3-16-54.7-16-54.7 c-34.7-17.3-37.3-1.3-57.3,25.3c-12,16-18.4,19.8-36,29.3c-27.4,14.9-62.7,80-62.7,80s13.3,10.7,9.3,18.7s2.7,25.3,12,28 c9.3,2.7,26.7,6.7,29.3,16c2.7,9.3,6.7,13.3,28,13.3c8-1.3,21.7-6.7,29.7-2.7L356.5,208.5z'
}, 2400, mina.bounce);
};
function red2() {
red.animate({
'path': 'M352.9,216.5c13.3-22.7,24-44,24-68c0-17.3,7-31.7,13.7-45c25.3-37.3-16-54.7-16-54.7 c-34.7-17.3-37.3-1.3-57.3,25.3c-12,16-18.4,19.8-36,29.3c-27.4,14.9-62.7,80-62.7,80s13.3,10.7,9.3,18.7s2.7,25.3,12,28 c9.3,2.7,23.1,8.5,29.3,16c41.3,50,17,86.7,31,86c10-0.7,5-37.3,23.3-66L352.9,216.5z'
}, 3800, mina.ease);
TweenMax.to(Drip3,0.1,{x: -2,scale: 0.5,opacity:1,delay: 4.3});
TweenMax.to(Drip3,2,{scale: 1.3, y: 800,delay: 4.3});
TweenMax.to(Drip3,0,{opacity:0, y: 0, delay: 2});
};
//
function blue1() {
blue.animate({
'path': 'M218.2,184.8l-45.3,73.3c0,0,9.3,16,6.7,21.3s-14.7,24,5.3,34.7c12,2.7,19.3-8.9,32,9.3 c10.7,15.3,30.7,18.7,48-2.7c6.7,0,14.3,3.7,19.7-3c5.3-6.7,46.7-70.3,46.7-70.3L218.2,184.8z'
}, 2200, mina.bounce);
};
function blue2() {
blue.animate({
'path': 'M218.5,184.8l-45.3,73.3c0,0,9.3,16,6.7,21.3s-14.7,24,5.3,34.7c12,2.7,16.2-4.4,38.7,0 c49.3,14,31.6,73.3,44.7,73.3c9.6,0,3-50.3,16.3-69.7c4.8-7,46.7-70.3,46.7-70.3L218.5,184.8z'
}, 3800, mina.ease);
TweenMax.to(Drip2,0.1,{x: -2,scale: 0.5,opacity:1,delay: 4.3});
TweenMax.to(Drip2,2,{scale: 1.2, y: 500,delay: 4.3});
TweenMax.to(Drip2,0,{opacity:0, y: 0, delay: 2});
};
//
function white1() {
white.animate({
'path': 'M176.5,253.8l-30.3,49.7c0,0-10.7,18.7-2.7,32c-1.3,4-10.7,22.7,6.7,38.7 c6.7,1.3,21.3,5.3,26.7,13.3c5.3,8,20,8.7,29.3,6c4-4,10.7-4,17.3-1.3c8,2.7,12-0.7,21.3-15.3c9.3-14.7,42.7-65.3,42.7-65.3 L176.5,253.8z'
}, 2000, mina.bounce);
};
function white2() {
white.animate({
'path': 'M176.9,253.8l-30.3,49.7c0,0-10.7,18.7-2.7,32c-1.3,4-10.7,22.7,6.7,38.7 c6.7,1.3,22.3,2.7,26.7,13.3c7.4,18.1,19.8,20.6,25.6,12c30.7-45.3,16.7,44.3,25.7,44.3c13.6,0-1-41.7,15-65 c9.8-14.3,44.4-67.3,44.4-67.3L176.9,253.8z'
}, 3800, mina.ease);
TweenMax.to(Drip1,0.1,{x: -2,scale: 0.5,opacity:1,delay: 4.3});
TweenMax.to(Drip1,2,{scale: 1.1, y: 500,delay: 4.3});
TweenMax.to(Drip1,0,{opacity:0, y: 0, delay: 2});
};
//
animationTimeline();
External CSS
This Pen doesn't use any external CSS resources.