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.
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!!!
Well, you know, while the best explanaition I myself have come to so far as well, there is no video response feature anymore on RUclips for anybody to post a challenge to your dare.
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 ;)
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!
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.
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
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. ruclips.net/video/w-jULX0D5cg/видео.html - video about the event loop etc.
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.
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.
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?
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.
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?
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.
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.
You can make tutorial requests in the comments here - But I have several videos about that already: ruclips.net/video/ga_SLzsUdTY/видео.html ruclips.net/video/rhqeN10bK10/видео.html ruclips.net/video/J06Uz7m-Jn8/видео.html
@@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.
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.
For anyone wondering why most frames are spaced around 16.6 milliseconds apart, that is roughly equal to 60 FPS.
and if u wonder why there is 60FPS - it's coming from 60 Hz ;) - Refresh rate of monitors ;)
@@Baargaa nobody wondered that
really wonderful thank you
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!!!
Well, you know, while the best explanaition I myself have come to so far as well, there is no video response feature anymore on RUclips for anybody to post a challenge to your dare.
This channel is my MDN on youtube, the best teacher with soothing voice and content that is always on point
Dodging the punch analogy !! It made the difference between setInterval and requestAnimationFrame crystal clear. Thanks.
This really helped me out with Cellular Automaton simulations and understanding exactly what double buffering is and how to do it.
Nice and useful ! I guess the CSS use this function behind the scenes for transitions.Thank you !
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 ;)
thank you so much from morocco for your easy explanation
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!
Your voice is like political radio host. Which goes quite well with these teachings as well. Thanks for simple examples and hints. :)
I don't think requestAnimationFrame has ever been better explained
Finally an understandable explanation for this somewhat obscure method. Thanks a lot :)
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
YES, exactly what i was searching for!! Saved the vid!! Thanks a lot!
The way I explain things is just wonderful
Wow! wonderful explanation and demonstration! Best video I got so far! Thanks a lot!
Thanks you so much for this easy to understand introduction to Animation Frame.
Your explanation is simply awesome
Very useful and well explained. Thanks!
awesome bro...clear explanation......from india
Amazing man, I just love the way you explain it,
Thanks for the beautiful video
Amazing explanation!!
Super Clean Explanation :)
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?
Same here
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.
@@SteveGriffith-Prof3ssorSt3v3 Cool. Noted. Thank you. 👍
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
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.
ruclips.net/video/w-jULX0D5cg/видео.html - video about the event loop etc.
Thank you for this video
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.
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.
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?
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.
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?
Timing is a big part of it. You might find this interesting / helpful - ruclips.net/video/MCi6AZMkxcU/видео.html
Very good explanation , Sometimes i think that my sucess in programming dependence of teacher who teach me than of my brain capacity 😅
How do you change the speed of the animation?
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.
The motion still looks jittery, so it's not smooth. Is this the best we can get with JavaScript?
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.
Thank you again.
Thanks, that was interesting.
thank you
😢my numbers count but my box dont move 🤔🤷♂️
did you type or copy and paste? It's a very simple code sample that should run anywhere.
Sir i request to make a tut on making a finger swiper with vanilla js
You can make tutorial requests in the comments here -
But I have several videos about that already:
ruclips.net/video/ga_SLzsUdTY/видео.html
ruclips.net/video/rhqeN10bK10/видео.html
ruclips.net/video/J06Uz7m-Jn8/видео.html
@@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.
thank you
thank you