RequestAnimationFrame in JavaScript

Using the native requestAnimationFrame method we can make our browser repeat something very quickly forever. It calls itself to paint the next frame.

? Note: Your callback routine must itself call requestAnimationFrame() again if you want to animate a…

Using the native requestAnimationFrame method we can make our browser repeat something very quickly forever. It calls itself to paint the next frame.

? Note: Your callback routine must itself call requestAnimationFrame() again if you want to animate another frame at the next repaint. requestAnimationFrame() is 1 shot.

requestAnimationFrame takes one argument, only callback.

Syntax:

window.requestAnimationFrame(callback);

callback: The function to call when it’s time to update your animation for the next repaint.

Animations with requestAnimationFrame are non-blocking, which means if you make subsequent calls to requestAnimationFrame, the resulting animations will all occur at same time.

The goal is 60 frame per second(fps) to appear smooth animation.

So we do like this ?

setInterval(() => {
  // animation code
}, 1000/60);

But now we have requestAnimationFrame, which is more better and optimized:

  • Animations will be so smooth as its optimized
  • Animations in inactive tabs will stop, allowing the CPU to chill

Let’s see how can we create the above snippet using requestAnimationFrame

function smoothAnimation() {
    // animtion
    requestAnimationFrame(smoothAnimation)
}
requestAnimationFrame(smoothAnimation)



How can you start and stop animation ⏲️

requestAnimationFrame returns an ID you can use to cancel it.

let reqAnimationId;
function smoothAnimation() {
    // animtion
    reqAnimationId = requestAnimationFrame(smoothAnimation)
}

// to start
function start() {
    reqAnimationId = requestAnimationFrame(smoothAnimation)
}

// to end
function end() {
     cancelAnimationFrame(reqAnimationId)
}
console.log("reqAnimationId", reqAnimationId)

Checkout the codepen here for more details:



Reference ?



Summary ∑

If you do any animation on browser and wanted it to be optimised, then would highly recommend to use requestAnimationFrame web API.

Thanks for reading the article ❤️
I hope you love the article.

Buy Me A Coffee


Print Share Comment Cite Upload Translate
APA
Suprabha | Sciencx (2024-03-29T06:50:22+00:00) » RequestAnimationFrame in JavaScript. Retrieved from https://www.scien.cx/2021/07/12/requestanimationframe-in-javascript/.
MLA
" » RequestAnimationFrame in JavaScript." Suprabha | Sciencx - Monday July 12, 2021, https://www.scien.cx/2021/07/12/requestanimationframe-in-javascript/
HARVARD
Suprabha | Sciencx Monday July 12, 2021 » RequestAnimationFrame in JavaScript., viewed 2024-03-29T06:50:22+00:00,<https://www.scien.cx/2021/07/12/requestanimationframe-in-javascript/>
VANCOUVER
Suprabha | Sciencx - » RequestAnimationFrame in JavaScript. [Internet]. [Accessed 2024-03-29T06:50:22+00:00]. Available from: https://www.scien.cx/2021/07/12/requestanimationframe-in-javascript/
CHICAGO
" » RequestAnimationFrame in JavaScript." Suprabha | Sciencx - Accessed 2024-03-29T06:50:22+00:00. https://www.scien.cx/2021/07/12/requestanimationframe-in-javascript/
IEEE
" » RequestAnimationFrame in JavaScript." Suprabha | Sciencx [Online]. Available: https://www.scien.cx/2021/07/12/requestanimationframe-in-javascript/. [Accessed: 2024-03-29T06:50:22+00:00]
rf:citation
» RequestAnimationFrame in JavaScript | Suprabha | Sciencx | https://www.scien.cx/2021/07/12/requestanimationframe-in-javascript/ | 2024-03-29T06:50:22+00:00
https://github.com/addpipe/simple-recorderjs-demo