requestAnimationFrame() - Beau teaches JavaScript

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
💻 Code: codepen.io/bea...
🔗 More info: developer.mozi...
🐦 Beau Carnes on Twitter: / carnesbeau
⭐JavaScript Tutorials Playlists⭐
▶JavaScript Basics: • JavaScript Basics Course
▶Data Structures and Algorithms: • Data Structures and Al...
▶Design Patterns: • Design Patterns - Beau...
▶ES6: • ES6 - Beau teaches Jav...
▶Clean Code: • Clean Code - Beau teac...
-
We're busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.
Join our community at freecodecamp.com
Read great tech articles at medium.freecod...

[@ischysyt]

I watched this to understand how requestAnimationFrame works, now I need to find another PROPER video to understand.

[@kostiantynkarzhanov9216]

thank you, Beau! It's a great lesson!

[@CANIHAZURDREAMSPLS]

can you make a more clear video, bc I feel like this is a very important concept, and this video didn't do justice - PLEASE

[@charlesbungabong3892]

beau teaches javascript, dude!

[@CANIHAZURDREAMSPLS]

@@charlesbungabong3892 what...

[@JulianHernandez-zw4ob]

I thought I was the only one who thought this video was terrible.

[@vivekraj9875]

I can't understand timestamp😵

[@rafadydkiemmacha7543]

Timestamp in this case is just the amount of time that passed since you loaded your page. It’s useful, because keep in mind that animation engine doesn’t guarantee any stable progress. In theory, you can get 10 frames per second and then after a while it can go up 60. If you simply assume that 1 frame = 1 point in time, you may get your animation, game or whatever weird in pace. For example, your character can go slow for a few seconds and then go fast, just because your computer now is ready to render more frames per seconds, for any reason.

[@1001-w5q]

@@rafadydkiemmacha7543 I spent a while to understand how it works through playing around with different elements but then I saw your comment... Well, at least I got the answer on my own

[@kubaissen]

No optimization? It's bad coding it supossed to be some like: function anim(timestamp) { window.requestAnimationFrame(anim); clear(); steps(actorList.steps); draws(actorList.draws); }

[@airasyaqub4039]

U didnt explain it good. U should shed some light on timestamp which is a very imp thing in rAF.

[@arnobchowdhury9641]

Right. I do not understand what timestamp is. Can you explain?

[@sojumoscow]

Yeah I have a hard time understanding it too. Its because thats not my native language I have to search every word lol

[@raidoung4100]

@freeCodeCamp perhaps it would be good to update this video ?:d The comments kind of indicate it would need some revision :d

[@rajikkali2381]

Good planning, bad execution. I know what you're saying because I'm a coder, but otherwise I think I wouldn't have any idea. Speak in human terms, not technical ones.

[@rafadydkiemmacha7543]

It looks to me like you don’t fully understand how it works. What’s the point in cancelling animation like that? You say you cancel animation, but it’s not like that, because requestAnimationFrame() doesn’t work like interval. It works like a timeout! The cancelAnimationFrame() is almost never needed in practice. Instead, you would just check condition before running requestAnimationFrame() in your loop.

[@dablo898]

cancelAnimationFrame() is one of the advantages of using requestAnimationFrame over traditional statements it provides user full control over animation flow

[@rafadydkiemmacha7543]

Abid Ali he compares it to the interval, so it's pretty clean he doesn't understand how it works. Instead of cancelling the animation, the code would have been much more straightforward if he just used if() before calling requestAnimationFrame() each time. It's just one frame on animation, so the effect is pretty much identical.

[@RFsalman]

i'm confused, it seems the requestAnimationFrame is still getting called even when the animation is over, so why is cancelAnimationFrame() almost never needed like you said ?

[@rafadydkiemmacha7543]

salmanrf requestAnimationFrame() works like setTimeout(), not setInterval(). It doesn't go on unless you explicitly request it.

[@RFsalman]

@@rafadydkiemmacha7543 @Rafał Dydkiem Machał ohh !, i just realized, ever since i learned this function, i always reinvoke the rAF as the last statement in the animation function, separate from the test condition, so even the animation is finished the rAF is still getting called over and over again, lol, that is a ridiculous mistake from me, and you just made me realize it, thank you so much

[@antwanwimberly1729]

Bill Nyle the Seinfeld science guy Jerry 🤔 no soup for you The Yankees have been watching me since birth huh I know !! The Philließ

[@BelminIbrahimovic-gh3xx]

Thats the most confusing example ive ever seen in my life

[@antwanwimberly1729]

Kylie Rose Jackson Junior On the tackle

[@carlosbenavides670]

Very poor explanation...