Движение объекта по svg path при скролле

$(window).on('load resize', function() { 
    initContainer(); 
}); 
 
$(window).scroll(function(){ 
    setMotionPath(); 
}); 
 
function initContainer() { 
    var element = $('.svg'); 
    var motionPath = MorphSVGPlugin.pathDataToBezier("#way").reverse(); 
    TweenLite.set("#circle", { transformOrigin: "50% 50%" });     
 
    setMotionPath();     
}; 
 
function setMotionPath() { 
    var element = $('.svg'); 
    var motionPath = MorphSVGPlugin.pathDataToBezier("#way").reverse(); 
 
     TweenLite.to("#circle", 0, { 
            x: motionPath["x"], 
            y: motionPath["y"] 
        }); 
};

#circle { 
  transform-origin: 0px 0px 0px; 
} 
 
html, 
body { 
  height: 200%; 
  width: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
svg { 
  width: 100%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script> 
 
 
 
<svg class="svg" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> 
  <path id="way" stroke="#000" stroke-dasharray="4,2" stroke-width="1" d="M 100,10 L 100,300"></path> 
 
  <circle cx="100" cy="30" r="20" stroke="black" stroke-width="1" fill="orange" id="circle"/> 
</svg>