<div id="nav">
<div id="slider"></div>
  <button class="dark-grey-button club-demo-button" id="createAnimation">create animation</button> 
</div>
<svg id="demo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 786 400">
  
  <rect id="background" width="786" height="400" fill="#333"/>
  <g id="balloon">
    <rect id="bounds" x="51.65" y="100.51" width="77.1" height="106.1" fill="none" stroke="#dbdbdb" stroke-miterlimit="10" opacity="0.5" style="isolation: isolate"/>
    <path d="M128.65,141.11c0,21.1-18.9,52.7-38.3,52.7-20,0-38.3-31.5-38.3-52.7s17.2-40.6,38.3-40.6S128.65,119.91,128.65,141.11Z" fill="#e52125"/>
    <polygon points="90.35 189.01 86.65 206.31 100.25 204.51 90.35 189.01" fill="#e52125"/>
  </g>
  <path id="motionPath" d="M165.36,297.42s127.17,2.86,146-59c21-69,71-104,165-63s165,80,202,9,93-158,93-158" fill="none" stroke="#5dba47" stroke-miterlimit="10" stroke-width="4"/>
</svg>
body {
 margin:0;
 background: #cdcdcd;
}
svg {
  display: block;
  margin: 20px auto;
  width:800px;
}

#balloon{
  opacity:0.6;
}

#slider{
  float:left;
  width:300px;
  position:relative;
  top:8px;
}

#guides {
  opacity:0;
}

#nav {
  width:480px;
  margin:20px auto;
  height:30px;
}

button {
  
  padding:10px;
  float:right;
}

#rerun-button { display: none; }
console.clear();

var tween,
    opacity = false,
    motionPath = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:"#balloon"});

//offest the balloon by hafl width and half height to make it appear centered on path
TweenLite.set("#balloon", {xPercent:-50, yPercent:-50});

    console.log(motionPath)

$("#createAnimation").click(function(){
  
  tween = TweenLite.to("#balloon", 2, {bezier:{values:motionPath, type:"cubic"}, onUpdate:updateSlider});
  
});
















/* controls */

//toggle opacity of guides when svg is clicked
$("#demo").click(function(){
  TweenLite.set("#guides", {opacity:Number(opacity = !opacity)});
});

//slider 

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

function updateSlider() {
  $("#slider").slider("value", tween.progress());
} 

// super secret Draggable code
var draggable = Draggable.create("#balloon", {
  type:"x,y"
})

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
  2. https://codepen.io/GreenSock/pen/ee8ac247ddeb87e229d660127c6fe73d
  3. //codepen.io/GreenSock/pen/dvtaJ

External JavaScript

  1. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js?v=333
  2. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=1899
  3. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js
  4. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  5. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-alpha.js