JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<div id="ball"></div>

CSS

#ball {
  background: red;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  position: relative;
  left: 50%;
  margin-left: -25px;
}

JavaScript

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

var draw = (function () {
		var ball = $('#ball'),
      xMin = 0,
      xMax = $(window).height() - ball.height(),
      width = $(window).width(),
      pos = 0,
      dir = 1,
      speed = 8,
      fps = 60,
      interval = 1000 / fps;
    return function () {
      setTimeout(function() {
        window.requestAnimationFrame(draw);

        pos = ball.position().top;
        if (pos > xMax || pos < xMin) {
          dir *= -1;
        }

        pos += (dir * speed);
        ball.css('top', pos + 'px');
        //ball.css('left', (Math.cos(pos) * width) + 'px');
      }, interval);
    }
})();

draw();