<svg version="1.1"
   id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="Domestic_Dromedary_silhouette.svg"  x="0px" y="0px" 
   viewBox="9 80 800 400" style="enable-background:new 9 80 800 400;" xml:space="preserve">
<style type="text/css">
  .st0{fill:#1D1D1D;stroke:#000000;stroke-miterlimit:10;}
  .st1{fill:#CCCCCC;}
</style>
<rect id="background" x="9" y="80" class="st0" width="800" height="400"/>
  
  
<path id="box" class="st1" d="M366.5,74.5c1.19,58.5-.19,314.24-.19,314.24V678.5H987V74H670.89Z"/>
  
<path id="star" class="st1" d="M366.5,74.5c43,68,289,295,289,295l-289.19,309,317.19-279L987,678.5l-270.5-308L987,74,682.5,335.5Z"/>
  
<path id="star2" class="st1" d="M1037.5,403.5c-79.07-14.86-332-37-332-37l-35-359-16,358-352,28,351.21,15.83L682.5,751.5l20-343.21Z"/>
</svg>



<div id="slider2"></div>
<div id="slider"></div>

body {
 margin:0;
 background: #333;
}
svg {
  display: block;
  margin: 20px auto;
  width:400px;
}

#star, #star2{
  visibility:hidden;
}

#slider, #slider2{
  width:420px;
  margin:20px auto;
}

var tl = gsap.timeline({onUpdate:updateSlider}),
    circle = document.getElementById("box");

var t2 = gsap.timeline({onUpdate:updateSlider}),
    circle = document.getElementById("box");

tl.to(box, 1, {morphSVG:"#star2"}, "+=1");

t2.to(box, 1, {morphSVG:"#star2"}, "+=1")
  .to(box, 1, {morphSVG:"#star"}, "+=1");





$("#slider").slider({
  range: false,
  min: 0,
  max: 1,
  step:.001,
  slide: function ( event, ui ) {
    tl.progress( ui.value ).pause();
  },
  stop: function () {
    tl.pause();
  }
}); 

 $("#slider2").slider({
  range: false,
  min: 0,
  max: 1,
  step:.001,
  slide: function ( event, ui ) {
    t2.progress( ui.value ).pause();
  },
  stop: function () {
    t2.pause();
  }
}); 





function updateSlider() {
  $("#slider").slider("value", tl.progress());
  $("#slider2").slider("value", t2.progress());
}