Animation Loops in JavaScript using requestAnimationFrame

Create really smooth animations in JavaScript by having your animation use the requestAnimationFrame function.
Learn more at: www.kirupa.com

[@devinwarrick3660]

Here in 2020, catching some useful info from the video for the first time. Thank you!

[@markm8090]

I'm only just learning jq and js and found this really useful and detailed enough for me to understand. Thanks.

[@ben-cb5er]

oh my god!!!!! man i really hope you achieve anything that you desire in life because this video is the ONLY video I've seen that actually explains requestAnimationFrame so simple and easy to grasp and yet in detail and to a point that i can comfortably use it!!!!! bro you got talent! dont stop teaching....you got yourself a new subscriber!! A like! and even bookmarked your website lol thank you again and keep it up

[@kirupa]

Thanks for the nice comment, Ben! I'm glad you liked this video. raF is still one of my favorite functions...even 7 years after this recorded :-)

[@nileshinkane6034]

This video explains it all, awesome man. Thanks

[@VeeraVikis]

Thanks a lot.Works very fine. Please,do zoom in while you're either typing or explaining the code blocks.

[@raultabajara]

Thanks! :) Helps a lot!

[@jandeswart1378]

10 years old, but still good information.

[@kirupa]

I do need to revise this a bit! I will do so in the near future, for there have been some changes that are worth calling out 😀

[@amudhavigneshwarankmp7571]

I understood rAF finally after watching your video in 2021. Thanks for the content :)

[@kirupa]

Great to hear! :P

[@valikonen]

Thank you Kirupa.

[@real-manoj-manoharan]

Your content is awesome. Your blogs are awesome too. Thanks for sharing

[@onelook1870]

Will have a look at this course

[@Bliss..]

Loved it.

[@General_Aladeen]

Great video for using native JS.

[@CJ-pd7xg]

Well done. Thank you for sharing.

[@McGavel1]

Cool, thanks for the info!

[@arturomuller4816]

great tutorial!

[@icetarrantula]

Wow, amazing explanation. Thank you

[@kirupa]

Thanks for the nice comment! Glad you found it useful 😀

[@amenslemirii7556]

How can you do this if you want to change images, say you have 5 images and want to make them loop?

[@SaveTheWhales5]

very good tutorial thank you!

[@prasadsawant22]

It's 2020 the video is 7 years old but still useful

[@winstonsmith1086]

UR amazing as usual. Is there some way to use this to call an animation (function) after the animation has completed? I'm using jquery and the damned thing keeps resetting. Apparently anim-fill property forwards (in css) isn't working 4 me. :( Many thanks Kirupa) --You rock!

[@kirupa]

Can you post a snippet of the code in question? It could be a bunch of things. A better place to post your snippet would be on the forums at forum.kirupa.com where you have more formatting options! :-)

[@muhammedraseen8505]

Thank you for the video

[@AdemarSantana]

Awesome!

[@taospencer1403]

very well explained.

[@ronaldurbina8233]

thank you

[@Jimmy-lu6pr]

Thank you!

[@rock_0075]

Thanks for the video, i am still a bit confused with the return value it produces , like in the below code .function gameLoop(timestamp){ let deltaTime=timestamp- lastTime; lastTime = timestamp; ctx.clearRect(0,0,800,600); paddle1.update(deltaTime); paddle1.draw(ctx); requestAnimationFrame(gameLoop); } gameLoop(); so when the gameloop() fuction is called first, it will go through the gamLoop function with no parameter, so will timestamp will be zero initially? and also how come requestAnimationFrame(gameLoop); will return a timestamp? really appreciate your help

[@kirupa]

Rock_007 Can you please post this on the forums at forum.kirupa.com This will require some code formatting as part of the response 😀

[@rock_0075]

@@kirupa Thanks for the reply :) , i have just created an account and posted at forum.kirupa.com/t/timestamp-in-callback-requestanimationframe-function/642777 sorry i am new to coding so not sure about the code formatting.

[@bullygram]

Small Bro u r great

[@donutbedum9837]

thanks mate

[@Toontic]

Thanks for this well presented video. How would I change the image randomly from an ever growing image folder like a gallery every time the animation starts.

[@kirupa]

Hi Toontic! Can you please ask this question on the forums at forum.kirupa.com ? I can share some snippets that may help.

[@Toontic]

@@kirupa Will do. Thanks

[@scikick]

Wouldn't animations on a 30fps screen be half as slow than on a screen with 60fps? What if you don't want your animation to be just frame by frame, but there's a time factor to it? For example, I want a car moving at a fixed speed across the screen. Without any extra inputs like 'time passed since', how would you attempt to do this? Thanks for the awesome video btw. Cheers :)

[@kirupa]

Sorry for the delay in getting back to you. Can you post this question on forum.kirupa.com? The answer is going to be a bit more involved, and posting with the limited formatting options here simply won't work :P

[@scikick]

Kirupa Chinnathambi Done. Thanks. :)

[@taospencer1403]

What device do you have that works at 30fps?

[@durchschnittlich]

I have seen other people hate on setInterval and setTimeout as well. But a question nobody could answer so far, or I didn't listen is: How do you make it wait?

[@kirupa]

+4E2010XD There is no built-in way, but you can do what I've described here by using an extra variable that determines the play state: forum.kirupa.com/t/pausing-requestanimationframe/633995 :-)

[@mledesma64]

Thank you

[@MrBosiwollig]

GREAT! :D

[@juancarlosgallegos3902]

Good video :) I think it would've helped if you started with an implementation of the animation loop that did NOT use rAF because that would've helped to explain the purpose of rAF

[@kirupa]

That is good feedback, Juan. I will take that into consideration when I re-record these videos in the future.

[@chunk1978]

What advantages, if any, are there in using requestAnimationFrame instead of using a CSS Animation?

[@kirupa]

Because it is JavaScript, you aren't limited by the CSS animation syntax, keyframes, and only the properties whose values you can set. You are free to create more freeform animations such as particle effects and so on. For simple animations like revealing a menu, page transitions, and so on, both are similar.

[@chunk1978]

Thanks for the explanation. Also, I ordered the 2nd edition of your React book and I'm looking forward to reading it when it arrives. Thanks again :)

[@Berkana]

With this technique, how do you set frame rate? The only way to set the frame rate using this that I can find on the web is to wrap it in a setInterval inside your animation function.

[@kirupa]

+Berkana The setInterval approach is basically it. There is no good alternative solution for setting the frame rate! :(

[@Berkana]

+Kirupa Chinnathambi is there some way to determine the rate of animation besides messing with the frame rate? I would like to calculate the animation details on-demand of requestAnimationFrame, independent of the frame rate.

[@lizbanach3684]

Would this animation loop work with a tween engine like TweenNano or TweenLite?

[@kirupa]

You wouldn't use both requestAnimationFrame and TweenNano/TweenLite. Both of those come with their own looping implementation under the covers that take care of all this for you :-)

[@lizbanach3684]

I see. I know this is random, but do you by any chance know of a way to auto loop with TweenNano or TweenLite? I have been looking everywhere and can't find a solution for this.

[@kirupa]

Unfortunately, I do not. You could try posting on forum.kirupa.com and seeing if somebody there knows :-)

[@FitnessChaos]

good video

[@orenmizr]

what would you do if you needed to support ie9 ?? (for the enterprise)

[@kirupa]

I would use a polyfill that uses the built-in timers on older browsers: gist.github.com/paulirish/1579671 :P

[@Geert890]

+Kirupa Chinnathambi I copied your code letter by letter and it didnt work... WHY?

[@kirupa]

+Geert Boer Can you share your code? I'd be happy to take a look and see what may be wrong. If you need a place to post that has good code formatting, please post your code snippet here: forum.kirupa.com

[@Geert890]

+Kirupa Chinnathambi thanks for the response. I already deleted the snippets unfortunately... I have a big exam tomorrow where I have to make a bucket and there will be 5 different fruits falling from the air. The bucket has to 'catch' the right fruit to get points. It's very difficult and I'm panicking a bit now because I have no idea how to do it.....

[@kirupa]

+Geert Boer What you are trying to do is a bit tricky - it involves understanding a lot of things (only a part of which is working with animations). If you have working (or partially working) examples, I can see where things are wrong.

[@marqimoth6987]

how could i use this to make a repeating animation like a question mark box in mario?

[@kirupa]

There are several ways to do that! Can you repost your question on forum.kirupa.com where we can dive into this in more detail?

[@marqimoth6987]

@@kirupa sure

[@beau6077]

//using translate3d() prop with .js //posting here for future me who has seen this vid a dozen times and forgets stuff. var currentPos = 0; var thing = document.querySelector("#thing") var requestAnimationFrame = window.requestAnimationFrame; function moveThing () { currentPos+= 5; thing.style.transform = "translate3d(" + currentPos + "px, 30px, 0px)"; if (Math.abs(currentPos) >= 900) { currentPos = - 500; } requestAnimationFrame(moveThing); } moveThing();

[@NewTechGenius]

How would I apply this to a sprite in a canvas?

[@kirupa]

This will help you out: www.kirupa.com/html5/creating_simple_html5_canvas_animation.htm :-)

[@NewTechGenius]

Thanks for the quick response :)

[@mikaelnilsson8041]

Great video! At kzbin.info/www/bejne/qH_WdGSMfp5mbpom25s the animation is stuttering considerably. How do you remove this stuttering?

[@kirupa]

Mikael - that is a result of my video recording/encoding. If you view it in the browser, it looks really smooth :-)

[@bhaveshgohel]

Thanks. (y)

[@danielgolden6991]

This guy was using VS code before it was cool.

[@kirupa]

Haha! I wish that were the case with other tools and technologies that I had bet on.

[@widheg]

How can you be 100% certain that the variable requestAnimationFrame was actually initialized? Before using it (i.e. to call a function), you should test that it has been initialized.

[@kirupa]

That may be unnecessary these days, for requestAnimationFrame is built-in and fully supported by almost every browser out there :P

[@widheg]

As you say ... "ALMOST every browser"... so what happens in an older browser? Ever heard of defensive programming? ;-)

[@kirupa]

Fair point. If I update this video, I'll be sure to make a mention of providing a polyfill for the users on old browsers :-)

[@widheg]

Outline: var raf=null; /*Try to initialize raf: */ ... ... if (raf !== null) { /* Initialization succeeded. */ Allowed to use 'raf' here i.e. if-and-only-if browser supports it. ... ... } /* Do not use 'raf' here. */

[@joshiprabhas]

that keystroke noise is killing me

[@qwe123727]

Hey you are mixing transition with animation

[@kirupa]

Thanks! I'll need to revise this at some point to be more accurate haha.

[@qwe123727]

Kirupa Chinnathambi imean, idea is right, example is wrong. Don't worry, you are far better than a normal Indian. Region matters

[@kirupa]

Ethashamuddin Mohammed I glanced through the video. Where is the mistake?

[@qwe123727]

Kirupa Chinnathambi you are appending hash symbol to an element. This is transition but not animation because you are changing the state of an element per unit time. In animation states does not change.

[@kirupa]

Ethashamuddin Mohammed Appending a hash tag has no bearing on whether the output is an animation or transition. Animations and transitions are similar, but CSS has the concept of a transition defined as a property. Anything that isn’t a CSS Transition is considered an animation, especially in JavaScript where you don’t have any other concept. Also, states change in both animation and transition. That is the fundamental definition of an animation - state changing over a period of time.

[@Nexaman18]

i can't understand any thing

[@kirupa]

That's totally normal as part of learning. Can you be more specific on what you are stuck on?

[@zwhitchcox]

The first half of the video was just explaining what animation was. We know what animation is. We know that we're not going to notice it moving one pixel, but over time, moving several pixels, we will notice. We know that it's good to be cross browser compatible. That was another like two minutes. We are web developers. You don't need to explain every little thing to us. Having to stop watching this video, now, because it's already wasted 6 minutes of my time.

[@kirupa]

+Zane Hitchcox That's good feedback. I'll revise this video in the near future to be more concise!

[@sheilferzepeda1124]

+Kirupa Chinnathambi It's only partial feedback. I found the introduction very helpful since I'm only just starting to use animation in code. I would personally suggest how to operate youtube timers - it's not old school tv so in that regard maybe annotated times could help people track around first

[@kirupa]

+Sheilfer Zepeda That's a great idea! I have gone ahead and added a "Skip intro" link to the intro slides that jumps you to the 3 minute mark where we start talking about the actual API itself :-)

[@timbrown7681]

+Zane Hitchcox thats what she tells you, doesn't she? :D be grateful...

[@Geert890]

+Kirupa Chinnathambi i was happy about the attention to little details dont listen to zane hitchcox it is wat makes this video good