The Hidden World of requestAnimationFrame

There is a great method called window.requestAnimationFrame which lets you work with the natural rhythm of the browser to improve your UI updates and animations. It will let you call a function each time it is about to do a screen paint and update the interface.
Inspiration for this video: gomakethings.com/how-to-use-r...
Code from video: gist.github.com/prof3ssorSt3v...
MDN reference for requestAnimationFrame: developer.mozilla.org/en-US/d...

[@mykalimba]

For anyone wondering why most frames are spaced around 16.6 milliseconds apart, that is roughly equal to 60 FPS.

[@Baargaa]

and if u wonder why there is 60FPS - it's coming from 60 Hz ;) - Refresh rate of monitors ;)

[@techsyndrome3291]

@@Baargaa nobody wondered that

[@biswamohandwari780]

really wonderful thank you

[@retagainez]

As chaotic as web development is, this has been a very straight-forward and useful resource for me to begin puzzling out how I could possibly start writing some 2-D physics engine in JavaScript.

[@maxtayebwa8987]

I dare anyone to tell me any better explanation for this thing! It's okay, youtube has billions of videos, feel free to try to tell me which channel even dares to compare!! Thanks prof, this was awesome, as usual of course!!!

[@TheD2D21]

Well, you know, while the best explanaition I myself have come to so far as well, there is no video response feature anymore on KZbin for anybody to post a challenge to your dare.

[@mrSargi7]

This channel is my MDN on youtube, the best teacher with soothing voice and content that is always on point

[@dajuanmcdonald3861]

This really helped me out with Cellular Automaton simulations and understanding exactly what double buffering is and how to do it.

[@patils22]

Dodging the punch analogy !! It made the difference between setInterval and requestAnimationFrame crystal clear. Thanks.

[@maelstrom57]

Finally an understandable explanation for this somewhat obscure method. Thanks a lot :)

[@angladephil]

Nice and useful ! I guess the CSS use this function behind the scenes for transitions.Thank you !

[@shankarghimire4492]

Wow! wonderful explanation and demonstration! Best video I got so far! Thanks a lot!

[@Baargaa]

Thx! Good introduction to the topic. I just transormed my setInteval functions to requestAnimationFrame. Now all browsers has the same effect. Earlier animations on FF were little bit too lazy ;)

[@georgebockari289]

I'm less than 3 minutes in and I'm going to sub. I can only imagine how you teach other topics, this was exceptional

[@Giregar]

Thanks you so much for this easy to understand introduction to Animation Frame.

[@rajkiran4873]

Your explanation is simply awesome

[@muegaschneemann]

YES, exactly what i was searching for!! Saved the vid!! Thanks a lot!

[@sleeplessdev7204]

I find that, oftentimes, when people try to name things to be more "friendly", it ends up making things more confusing. This was overall a great explanation though!

[@mohammedhayari28]

thank you so much from morocco for your easy explanation

[@dejandjosic1258]

Very useful and well explained. Thanks!

[@arnav_0397]

Amazing man, I just love the way you explain it,

[@smaragd_]

Your voice is like political radio host. Which goes quite well with these teachings as well. Thanks for simple examples and hints. :)

[@bisratiskool2193]

I don't think requestAnimationFrame has ever been better explained

[@OmarOnAWave]

Amazing explanation!!

[@mouradelcadi]

Thanks for the beautiful video

[@durgeshgupta6647]

awesome bro...clear explanation......from india

[@DanishKhan-lh3ob]

Super Clean Explanation :)

[@saifeddine6479]

The way I explain things is just wonderful

[@danielChibuogwu]

Thank you for this video

[@BrettCooper4702]

Thanks, that was interesting.

[@suvendudas5391]

Thank you again.

[@ryandsouza7100]

Hi Steve. Great video as always. Just one question. For which use-cases do you think it would be best to use this as an alternative for CSS animation?

[@suvendudas5391]

Same here

[@SteveGriffith-Prof3ssorSt3v3]

When animating, stick to using transform and opacity as much as possible to get the best performance. Most things can be done in CSS but if you need to calculate position or property values then you will using JS. If you use JS then use requestAnimationFrame instead of setTimeout or setInterval.

[@ryandsouza7100]

@@SteveGriffith-Prof3ssorSt3v3 Cool. Noted. Thank you. 👍

[@delcarmat]

thank you

[@marcinkalmar9964]

Very good explanation , Sometimes i think that my sucess in programming dependence of teacher who teach me than of my brain capacity 😅

[@stapler942]

So I'm making a small grid-based game project in the JS canvas. I am needing a fixed time-step sort of mechanism for various updates. Would you say the easiest method is to call my draw() and update() functions after a certain count of frames in the requestAnimationFrame loop? Can I assume that this framerate will not be too different on different browsers/machines?

[@SteveGriffith-Prof3ssorSt3v3]

The frame rate will definitely vary depending on the machine. But with requestAnimationFrame and highRes timestamps you can calculate things to run smoothly. You can also look at the Web Animations API.

[@Jinxxeh]

Hi Steve, is there any benefit to wrapping something in window.requestAnimationFrame if you aren't repeatedly/recursively calling the callback? I've noticed people doing that sometimes and I'm not sure what the purpose is

[@SteveGriffith-Prof3ssorSt3v3]

It uses a different part of the event loop for scheduling things. So, if you need to have tasks, and microtasks and raf calls in a specific order, then it might be something you want. kzbin.info/www/bejne/rV7Nhn-OZalomck - video about the event loop etc.

[@universalworthy2169]

Hello Steve, thank you very much for your helpful video. I have a question: if I have multiple box elements and access them via an array const boxes = document.querySelectorAll(".box"); I would like to apply the box.style.transform ... for every item in the array when clicking with forEach, like boxes.forEach(item =>{item.addEventListener("click", ()=>handleClick()} ? I keep getting the error: Uncaught TypeError: Cannot set properties of undefined (setting 'transform'). I don't really understand this error. Please help. Thank you very much.

[@SteveGriffith-Prof3ssorSt3v3]

Whenever you see an error that say "Cannot" do something "of undefined (setting x)" It means that the thing you wrote in front of x is undefined. Usually a misspelled variable or missing variable or wrong scope of variable.

[@tails_the_god]

Aw yes pretty smooth indeed.. I was getting smooth movements but now i get jerky movement in my windows programming when im programming my win32 NES emulator soooo it's about timing that causes it?

[@SteveGriffith-Prof3ssorSt3v3]

Timing is a big part of it. You might find this interesting / helpful - kzbin.info/www/bejne/g3TMZ3SQgtCrmbc

[@abhim6380]

How do you change the speed of the animation?

[@SteveGriffith-Prof3ssorSt3v3]

The function runs automatically each time the screen is being painted. Most of the time this should be a fairly stable time increment with smooth animations. You can use the time passed between frames or time passed since the page loaded to calculate things.

[@Barnardrab]

The motion still looks jittery, so it's not smooth. Is this the best we can get with JavaScript?

[@SteveGriffith-Prof3ssorSt3v3]

Animation with JS is a complex topic with many layers, many techniques, and many approaches. requestAnimationFrame is just one tool in the toolbox. There are many factors that go into making animations run smoothly and many things that can interfere with that.

[@azealot7112]

How do I change the FPS?

[@SteveGriffith-Prof3ssorSt3v3]

You can use the Performance Timing API to calculate a High Res time difference and calculate the distance you want to move each time you repaint. -developer.mozilla.org/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API Another option is to use the Web Animations API - developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

[@allanimeworld2898]

Sir i request to make a tut on making a finger swiper with vanilla js

[@SteveGriffith-Prof3ssorSt3v3]

You can make tutorial requests in the comments here - But I have several videos about that already: kzbin.info/www/bejne/nZLChH-wqLqXirs kzbin.info/www/bejne/qJnUloFnZcd-Z5I kzbin.info/www/bejne/gGGZhq1topJ9pJo

[@allanimeworld2898]

@@SteveGriffith-Prof3ssorSt3v3 yeah sir First thank you for reply You taught them i am talking about touch image slider. Then we will get how to use them.

[@necronomicon-xmortis9362]

😢my numbers count but my box dont move 🤔🤷‍♂️

[@SteveGriffith-Prof3ssorSt3v3]

did you type or copy and paste? It's a very simple code sample that should run anywhere.

[@Ivan-dt9mc]

thank you

[@elkhanhamet2561]

thank you