title: Movement of an object by svg path with a scroll
body: <p>I have some code:
  <br>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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"]
          });
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#circle {
    transform-origin: 0px 0px 0px;
  }
  
  html,
  body {
    height: 200%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  svg {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;svg class="svg" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;path id="way" stroke="#000" stroke-dasharray="4,2" stroke-width="1" d="M 100,10 L 100,300"&gt;&lt;/path&gt;
  
    &lt;circle cx="100" cy="30" r="20" stroke="black" stroke-width="1" fill="orange" id="circle"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  
  <br><br><br>
  <a href="https://codepen.io/semenchenko/pen/vpGpdw" rel="nofollow noreferrer">CodePen</a>
  <br><br>
  The object (<code>#circle</code>) must move with the scroll along the line (<code>path#way</code>). <br>
  <br>
  Movement should be smooth. <br><br>
  <strong>Question:</strong> How can I get a circle  to move along path path smoothly with a scroll (preferably using TweenMax)?</p>