How to create a "Simple Harmonic Oscillation" on scroll event using Javascript

Question

Currently I have a element on the page. I would like that object to oscillate left and right similar to the one in the example give below. However, I would like to bind the oscillation with the browser window scroll event.

https://www.khanacademy.org/computer-programming/simple-harmonic-motion/4920589909229568

I tried this but it's not smooth and accurate:

Javascript

    let butterfly_y_position_log = []; 
    let scroll_times = 0;
    let scroll_direction;
    $(window).scroll(function(){
      let butterfly_y_position = $('.floating-butterfly').offset().top;
      let butterfly_x_position;
      butterfly_y_position_log.push(butterfly_y_position);
      if (butterfly_y_position_log.length > 2){
        butterfly_y_position_log = butterfly_y_position_log.slice(1, 4);
      }

      if (butterfly_y_position_log[0] < butterfly_y_position_log[1] || butterfly_y_position_log[1] == undefined){
        scroll_direction = 'down';
        scroll_times++;
        butterfly_x_position =  ($(window).width() / 2) + (100 * Math.sin(2* Math.PI + scroll_times));
      } else {
        scroll_direction = 'up';
        scroll_times--;
        butterfly_x_position =  ($(window).width() / 2) + (100 * Math.cos(2* Math.PI + scroll_times));
      }
      console.log(scroll_times);
      console.log(butterfly_x_position);
      $('.floating-butterfly').css({left:butterfly_x_position});
    });

HTML

<img src="..." class="floating-butterfly">

CSS

.floating-butterfly {
  position: fixed;
  top: 40px;
  z-index: 2;
}

The Y-position will remain fixed, only X-position will change on scroll.