//// 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")
View Compiled

//// 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.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js
  3. //cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js