window.requestAnimationFrame(draw) with setInterval wrapped

by schrodingers

HTML

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

CSS

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

JavaScript

// window.requestAnimationFrame(draw) with setInterval wrapped 

window.requestAnimationFrame(draw);

// Properties _____________________________________________

var ball = $('#ball');

var xMin = 0;
var xMax = $(window).height() - ball.height();
var pos = 0;
var dir = 1;
var speed = 8;
var fps = 60;
var interval = 1000 / fps;


// Animation Logic ________________________________________

function draw() {
  setTimeout(function() {
    window.requestAnimationFrame(draw);

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

    pos += (dir * speed);
    ball.css('top', pos + 'px');
  }, interval);
}

draw();