通过带有滚动的svg路径移动对象

Question

我有一些代码：

$(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>

CodePen

对象（#circle）必须沿着线条（path#way）移动。

运动应该顺利。

问题：如何通过滚动（最好使用TweenMax）顺畅地沿路径路径移动圆圈？