Sinus movemet

by Artem

HTML

<div class="parent">
  <div class="div" style="left: 0px"></div>
</div>

CSS

.parent {
  position: relative;
  margin-top: 100px;
}

.div {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

'use strict';

const div = document.getElementsByClassName('div')[0];

let a = 1;
let top = 0;

let dir = 1;

let i = 0;
let interval;


let xDir = 1;

function foo() {
  i++;
  if (i > 200) {
    cancelAnimationFrame(interval);
  } else {
    requestAnimationFrame(foo);
  }

  if (a >= 1) {
    dir = -1;
  }

  if (a <= -1) {
    dir = 1;
  }

  if (dir === -1) {
    a = Math.max(Math.min(a + (0.2 * -1), 1), -1);
  } else if (dir === 1) {
    a = Math.min(a + 0.2 * 1, 1);
  }

  if (true) {
    top = Math.sin(a);
    div.style.top = top * 100 + 'px';
    if (Number.parseInt(div.style.left) > 250) {
      xDir = -1;
    }

    if (Number.parseInt(div.style.left) === 0) {
      xDir = 1;
    }

    div.style.left = Number.parseInt(div.style.left) + 5 * xDir + 'px';
  }
}

interval = requestAnimationFrame(() => {
  i++;
  if (i > 200) {
    cancelAnimationFrame(interval);
  }
  foo();
}, 200);