.object
  .wrap
    svg.element(viewBox='0 0 350 350')
      path.path(d='M218.2,96.4L218.2,96.4c6.9,14.1,20.4,23.8,35.9,26.1l0,0c39.1,5.7,54.7,53.7,26.4,81.3l0,0 c-11.2,10.9-16.4,26.7-13.7,42.2v0c6.7,38.9-34.2,68.6-69.2,50.2l0,0c-13.9-7.3-30.5-7.3-44.4,0l0,0c-35,18.4-75.8-11.3-69.2-50.2 l0,0c2.7-15.5-2.5-31.2-13.7-42.2l0,0c-28.3-27.6-12.7-75.6,26.4-81.3l0,0c15.5-2.3,28.9-12,35.9-26.1l0,0 C150.2,61,200.8,61,218.2,96.4z')

//Colors

clr1 = darken(turquoise,55%)
clr2 = lighten(yellow,45%)

//Container

.object
  position absolute
  top 44%
  left 50%
  width 0px
  height 0px
  
//SVG

.wrap > *
  position absolute
  top 50%
  left 50%
  width 350px
  height 350px
  margin-left -(@width / 2)
  margin-top -(@height / 2)
  
.path
  fill clr2
  
//

body
  overflow hidden
  background clr1

//VARIABLES

var object = $('.object');
var s = Snap('.element');
var path = s.select('.path');

var tl = new TimelineLite();

//GSAP TL  

  tl.to(
    object, 0.65, {
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step1();}
    }
  );

  tl.to(
    object, 0.65, {
      rotation: 0,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step2();}
    }
  );

  tl.to(
    object, 0.65, {
      rotation: -18,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step3();}
    }
  );
  
  tl.to(
    object, 0.65, {
      rotation: -36,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step4();}
    }
  );

  tl.to(
    object, 0.65, {
      rotation: -54,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step5();}
    }
  );

  tl.to(
    object, 0.65, {
      rotation: -72,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step6();}
    }
  );
  
  tl.to(
    object, 0.65, {
      rotation: -86,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step7();}
    }
  );

  tl.to(
    object, 0.65, {
      rotation: -98,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step8();}
    }
  );

  tl.to(
    object, 0.65, {
      marginLeft: -3,
      marginTop: 11,
      rotation: -112,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step9();}
    }
  );
  
  tl.to(
    object, 0.65, {
      marginLeft: -6,
      marginTop: 22,
      rotation: -128,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step10();}
    }
  );
  
  tl.to(
    object, 0.65, {
      marginLeft: -9,
      marginTop: 32,
      rotation: -144,
      ease: Elastic.easeOut.config(1, 0.35),
      onStart: function() {step11();},
      onComplete: function() {tl.restart();}
    }
  );

//SNAP SVG
function step1() {
  path.animate({
    'path': 'M218.2,96.4L218.2,96.4c6.9,14.1,20.4,23.8,35.9,26.1l0,0c39.1,5.7,54.7,53.7,26.4,81.3l0,0 c-11.2,10.9-16.4,26.7-13.7,42.2v0c6.7,38.9-34.2,68.6-69.2,50.2l0,0c-13.9-7.3-30.5-7.3-44.4,0l0,0c-35,18.4-75.8-11.3-69.2-50.2 l0,0c2.7-15.5-2.5-31.2-13.7-42.2l0,0c-28.3-27.6-12.7-75.6,26.4-81.3l0,0c15.5-2.3,28.9-12,35.9-26.1l0,0 C150.2,61,200.8,61,218.2,96.4z'
  }, 450, mina.bounce);
};

function step2() {
  path.animate({
    'path': 'M203.5,66.7l18.5,37.5c4.6,9.2,13.4,15.6,23.5,17.1l8.5,1.2c39.1,5.7,54.7,53.7,26.4,81.3l0,0 c-11.2,10.9-16.4,26.7-13.7,42.2v0c6.7,38.9-34.2,68.6-69.2,50.2l0,0c-13.9-7.3-30.5-7.3-44.4,0l0,0c-35,18.4-75.8-11.3-69.2-50.2 l0,0c2.7-15.5-2.5-31.2-13.7-42.2l0,0c-28.3-27.6-12.7-75.6,26.4-81.3l8.5-1.2c10.2-1.5,19-7.9,23.5-17.1l18.5-37.5 C158.9,43.4,192.1,43.4,203.5,66.7z'
  }, 800, mina.elastic);
};

function step3() {
  path.animate({
    'path': 'M203.5,66.7l18.5,37.5c4.6,9.2,13.4,15.6,23.5,17.1l44.7,6.5c24.3,3.5,34,33.4,16.4,50.5l-33,32.1 c-7,6.8-10.2,16.6-8.5,26.2l1.6,9.4c6.7,38.9-34.2,68.6-69.2,50.2l0,0c-13.9-7.3-30.5-7.3-44.4,0l0,0c-35,18.4-75.8-11.3-69.2-50.2 l0,0c2.7-15.5-2.5-31.2-13.7-42.2l0,0c-28.3-27.6-12.7-75.6,26.4-81.3l8.5-1.2c10.2-1.5,19-7.9,23.5-17.1l18.5-37.5 C158.9,43.4,192.1,43.4,203.5,66.7z'
  }, 800, mina.elastic);
};

function step4() {
  path.animate({
    'path': 'M203.5,66.7l18.5,37.5c4.6,9.2,13.4,15.6,23.5,17.1l44.7,6.5c24.3,3.5,34,33.4,16.4,50.5l-33,32.1 c-7,6.8-10.2,16.6-8.5,26.2l9.9,57.9c3.3,19.1-16.8,33.6-33.9,24.6l-54.9-28.9c-6.8-3.6-14.9-3.6-21.7,0l-11.3,5.9 c-35,18.4-75.8-11.3-69.2-50.2l0,0c2.7-15.5-2.5-31.2-13.7-42.2l0,0c-28.3-27.6-12.7-75.6,26.4-81.3l8.5-1.2 c10.2-1.5,19-7.9,23.5-17.1l18.5-37.5C158.9,43.4,192.1,43.4,203.5,66.7z'
  }, 800, mina.elastic);
};

function step5() {
  path.animate({
    'path': 'M203.5,66.7l18.5,37.5c4.6,9.2,13.4,15.6,23.5,17.1l44.7,6.5c24.3,3.5,34,33.4,16.4,50.5l-33,32.1 c-7,6.8-10.2,16.6-8.5,26.2l9.9,57.9c3.3,19.1-16.8,33.6-33.9,24.6l-54.9-28.9c-6.8-3.6-14.9-3.6-21.7,0L109,319.5 c-16.9,8.9-36.5-5.5-33.3-24.2l10.7-62.1c1.3-7.5-1.2-15.1-6.6-20.3l-9.3-9.1c-28.3-27.6-12.7-75.6,26.4-81.3l8.5-1.2 c10.2-1.5,19-7.9,23.5-17.1l18.5-37.5C158.9,43.4,192.1,43.4,203.5,66.7z'
  }, 800, mina.elastic);
};

function step6() {
  path.animate({
    'path': 'M203.5,66.7l18.5,37.5c4.6,9.2,13.4,15.6,23.5,17.1l44.7,6.5c24.3,3.5,34,33.4,16.4,50.5l-33,32.1 c-7,6.8-10.2,16.6-8.5,26.2l9.9,57.9c3.3,19.1-16.8,33.6-33.9,24.6l-54.9-28.9c-6.8-3.6-14.9-3.6-21.7,0L109,319.5 c-16.9,8.9-36.5-5.5-33.3-24.2l10.7-62.1c1.3-7.5-1.2-15.1-6.6-20.3l-36.4-35.5c-17.2-16.8-7.7-46,16.1-49.4l46-6.7 c10.2-1.5,19-7.9,23.5-17.1l18.5-37.5C158.9,43.4,192.1,43.4,203.5,66.7z'
  }, 800, mina.elastic);
};

function step7() {
  path.animate({
    'path': 'M183.4,25.9l38.6,78.2c4.6,9.2,13.4,15.6,23.5,17.1l44.7,6.5c24.3,3.5,34,33.4,16.4,50.5l-33,32.1 c-7,6.8-10.2,16.6-8.5,26.2l9.9,57.9c3.3,19.1-16.8,33.6-33.9,24.6l-54.9-28.9c-6.8-3.6-14.9-3.6-21.7,0L109,319.5 c-16.9,8.9-36.5-5.5-33.3-24.2l10.7-62.1c1.3-7.5-1.2-15.1-6.6-20.3l-36.4-35.5c-17.2-16.8-7.7-46,16.1-49.4l46-6.7 c10.2-1.5,19-7.9,23.5-17.1l38.6-78.2C170.8,19.3,180.2,19.3,183.4,25.9z'
  }, 800, mina.elastic);
};

function step8() {
  path.animate({
    'path': 'M183.4,25.9l38.6,78.2c4.6,9.2,13.4,15.6,23.5,17.1l88.1,12.8c6.5,0.9,9.1,9,4.4,13.6l-64.4,62.8 c-7,6.8-10.2,16.6-8.5,26.2l9.9,57.9c3.3,19.1-16.8,33.6-33.9,24.6l-54.9-28.9c-6.8-3.6-14.9-3.6-21.7,0L109,319.5 c-16.9,8.9-36.5-5.5-33.3-24.2l10.7-62.1c1.3-7.5-1.2-15.1-6.6-20.3l-36.4-35.5c-17.2-16.8-7.7-46,16.1-49.4l46-6.7 c10.2-1.5,19-7.9,23.5-17.1l38.6-78.2C170.8,19.3,180.2,19.3,183.4,25.9z'
  }, 800, mina.elastic);
};

function step9() {
  path.animate({
    'path': 'M183.4,25.9l38.6,78.2c4.6,9.2,13.4,15.6,23.5,17.1l88.1,12.8c6.5,0.9,9.1,9,4.4,13.6l-64.4,62.8 c-7,6.8-10.2,16.6-8.5,26.2l15.5,90.4c1,5.8-5.1,10.2-10.3,7.5l-84.1-44.2c-6.8-3.6-14.9-3.6-21.7,0L109,319.5 c-16.9,8.9-36.5-5.5-33.3-24.2l10.7-62.1c1.3-7.5-1.2-15.1-6.6-20.3l-36.4-35.5c-17.2-16.8-7.7-46,16.1-49.4l46-6.7 c10.2-1.5,19-7.9,23.5-17.1l38.6-78.2C170.8,19.3,180.2,19.3,183.4,25.9z'
  }, 800, mina.elastic);
};

function step10() {
  path.animate({
    'path': 'M183.4,25.9l38.6,78.2c4.6,9.2,13.4,15.6,23.5,17.1l88.1,12.8c6.5,0.9,9.1,9,4.4,13.6l-64.4,62.8 c-7,6.8-10.2,16.6-8.5,26.2l15.5,90.4c1,5.8-5.1,10.2-10.3,7.5l-84.1-44.2c-6.8-3.6-14.9-3.6-21.7,0l-84.7,44.5 c-4.9,2.6-10.7-1.6-9.8-7.1l16.2-94.5c1.3-7.5-1.2-15.1-6.6-20.3l-36.4-35.5c-17.2-16.8-7.7-46,16.1-49.4l46-6.7 c10.2-1.5,19-7.9,23.5-17.1l38.6-78.2C170.8,19.3,180.2,19.3,183.4,25.9z'
  }, 800, mina.elastic);
};

function step11() {
  path.animate({
    'path': 'M183.4,25.9l38.6,78.2c4.6,9.2,13.4,15.6,23.5,17.1l88.1,12.8c6.5,0.9,9.1,9,4.4,13.6l-64.4,62.8 c-7,6.8-10.2,16.6-8.5,26.2l15.5,90.4c1,5.8-5.1,10.2-10.3,7.5l-84.1-44.2c-6.8-3.6-14.9-3.6-21.7,0l-84.7,44.5 c-4.9,2.6-10.7-1.6-9.8-7.1l16.2-94.5c1.3-7.5-1.2-15.1-6.6-20.3l-67-65.3c-4.7-4.6-2.1-12.5,4.4-13.4l88.3-12.8 c10.2-1.5,19-7.9,23.5-17.1l38.6-78.2C170.8,19.3,180.2,19.3,183.4,25.9z'
  }, 800, mina.elastic);
};