JavaScript animation

Question

I am trying to animate a div moving 200px horizontally in JavaScript.

The code below makes it jump the pixels, but is there a way to make i

Answer 1

I did a ton of research, and I finally learned how to do it really well.

I like to place my program in a window.onload function, that way it dosn't run the code until the page has finished loading.

To do the animation, make a function(I'll call it the draw function) and call it what ever you want except reserved words, then at the very end of the draw function call the requestAnimationFrame function and give it the name of the function to be called next frame.

Before the requestAnimationFrame function can be used it must be declared.

See the code below:

window.onload = function() {
  function draw() { //  declare animation function
    context.fillStyle = "white";
    context.fillRect(0, 0, 400, 400);
    requestAnimationFrame(draw); // make another frame
  }
  var requestAnimationFrame = // declare the 
    window.requestAnimationFrame || // requestAnimationFrame
    window.mozRequestAnimationFrame || // function
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
  draw(); // call draw function
}

Note: Nothing after the line that calls the draw function will run, so you need to put everything you want to run before the line that calls the draw function.