title: sin and cos animations on a curved line with javascript and CSS
body: <p>I am trying to use sin and cos to animate a CSS image to move on <a href="https://cdn1.imggmi.com/uploads/2019/9/11/8dd18472440f35412bccc9ad3f045fd5-full.png" rel="nofollow noreferrer">this shape</a>. Can not make the CSS image to move on that curved bezier line.</p>
  
  <p>Can someone assist on how to use sin or cos in so, if a CSS object added, it would move smoothly along <a href="https://cdn1.imggmi.com/uploads/2019/9/11/8dd18472440f35412bccc9ad3f045fd5-full.png" rel="nofollow noreferrer">such a line</a>?</p>
  
  <p>Here is the code that I tried to make the yellow circle to move on that line with sin and cos math in javascript.</p>
  
  <p>Thanks</p>
  
  <p><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>var field = document.getElementById("field");
   var ball = document.getElementById("ball");
   var ball2 = document.getElementById("ball2");
  
   var maxX = field.clientWidth - ball.offsetWidth;
   var maxY = field.clientHeight - ball.offsetHeight;
  
   var duration = 5; // seconds
   var gridSize = 50; // pixels
  
   var start = null;
  
   function step(timestamp) {
    var progress, x, y, y2;
    if (start === null)
     start = timestamp;
  
    progress = (timestamp - start) / duration / 1000; // percent
  
    x = progress * maxX / gridSize; // x = ƒ(t)
    y = 2 * Math.sin(x); // y = ƒ(x)
    y2 = 2 * Math.cos(x);
  
    ball.style.left = ball2.style.left = Math.min(maxX, gridSize * x)
      + "px";
    ball.style.bottom = maxY / 2 + (gridSize * y) + "px";
    ball2.style.bottom = maxY / 2 + (gridSize * y2) + "px";
  
    if (progress &gt;= 1)
     start = null; // reset to start position
        requestAnimationFrame(step);
   }
    requestAnimationFrame(step);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#field {
   position: absolute;
   height: 300px;
   width: 300px;
   z-index: 50;
   top: 20px;
   left: 20px;
  }
  
  #ball {
   position: absolute;
   left: 0;
   bottom: 50%;
   width: 40px;
   background: yellow;
    z-index: 5;
   height: 40px;
   border-radius: 200px;
  }
  
  #ball2 {
   position: absolute;
   left: 0;
   bottom: 50%;
   width: 20px;
   height: 20px;
    /*background: silver;*/
    border-radius: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="field"&gt;
   &lt;div id="ball"&gt;&lt;/div&gt;
   &lt;div id="ball2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>