#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/browser-apis/requestanimationframe

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/browser-apis/requestanimationframe

Repovive

requestAnimationFrame - Browser APIs | JavaScript | Repovive

Repovive.

JavaScript22 sections · 783 units18h total

Open in Course

requestAnimationFrame

Smooth animations

requestAnimationFrame runs code before the next repaint, perfect for smooth animations.

function animate() {
  element.style.left = position + "px";
  position += 1;
  
  if (position < 500) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

This syncs with the display refresh rate, typically $60$ fps.