Working with requestAnimationFrame() Method For Animations

In this tutorial, we are looking at the windows request animation frame. This is a method used to make animation much faster and easier to process. As you all know, to simulate the process we can use the setInterval method. But setInterval takes more CPU than it's needed. So the requestAnimationFrame method solves that problem and adds a much more quick response to the table.
Project example Used From:-
/ requestanimationframe-...
Comment us if you have any questions or
👉 Support Me on Patreon 😊:
/ dailytuition
🚀 Udemy Courses:
www.udemy.com/user/akshay-kas...
🎅 Playlist :
Complete MERN Series
• Getting Started with M...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
🛠️ Tools I use:
🟠 My Theme: • Finally, I am Back! St...
🟠 Font Family: fonts.google.com/specimen/Rub...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
👉 Follow us:
🟠 / akki.2013
📂 Source Project
📦
⏱️ Timestamps ⏱️
00:00 - Intro
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
More Videos:
💡 Complete Node Course
• Complete Node & Expres...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 React Complete Tutorial
• Complete React 16.8 Cr...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Mobile Shopee E-Commerce Website Course - PHP & MySQL
• Complete Mobile Shopee...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Portfolio Website with Bootstrap - HTML/CSS
• Complete Portfolio Web...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Responsive Blooger Website Using HTML/CSS
• Complete Responsive Bl...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Create a Shopping Cart Using PHP and Mysql
• Create Shopping Cart U...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Asp.net Registration Form Design with Validation Part - 1
• Asp.net Registration F...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete CRUD Operation with PHP MySql Database
• Complete CRUD Operatio...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 What is Node.js? How to install it?
• What is Node.js? Only ...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 PHP Complete Registration & Login System Using MySQLi - Complete Guide
• PHP Complete Registrat...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Hosting WordPress Website with Free Hosting
• Hosting Wordpress Webs...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Bootstrap Grid System The Complete Guide - In Action
• Asp.net Registration F...
Like this video If you find anything useful. Share with your friends that is all for now I will see you In the next one.
Thank You...! 🙏
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
#requestAnimationFrame #setInterval #Javascript

[@danielChibuogwu]

It's was really clear, straight to the point and simple

[@aleksandar7393]

One milli second is NOT 1000/60 but simply 1 as 1000 is setInterval is = 1s and milli means (10^−3) =0.001

[@OleksandrDanylchenko2k]

Yeah, I also got tripped on this statement 🤯

[@martinemanuel8239]

Super clear ! good job

[@SumitKumar-zn2po]

Keep up the great work,
Really Really helpful.

[@SumitKumar-zn2po]

One of the most valuable channels I have been able to find.

[@DailyTuition]

Thank you keep supporting🙏

[@apprendrelibrementlaprogra596]

Mercie bcp sir

[@robwolters7401]

You should use a combination of the two.
Set a frame rate for your animation say 40
now save the datetime when calling request animation frame,
after executing the function calculate time left till next frame and use this to set the time out.
Your visitors will be more satisfied because their computer doesn't run wild.

[@martinemanuel8239]

that is something called clock function right?? it's sounds familiar to me , I use three js sometimes

[@robwolters7401]

@@martinemanuel8239 It is a frame rate. Or frames per second.

[@martinemanuel8239]

@@robwolters7401 Yes yesterday I search a bit, and I find a method: const t0 = performance.now();
doSomething();
const t1 = performance.now();
console.log(`Call to doSomething took ${t1 - t0} milliseconds.`); who allows us keep the time to render efficiently

[@danielChibuogwu]

Thank you for this video,

[@DailyTuition]

Glad it was helpful!

[@dharmendrasharma9317]

❤️

[@randhir2588]

1000/60 is not 1 ms. I think u wanted to tell 60 times every sec..

[@adarshrathi8265]

Bro are you work on react or next js website clone

[@DailyTuition]

On react

[@adarshrathi8265]

@@DailyTuition yes, on react mainly on next js

[@DailyTuition]

Sure

[@cosmic8933]

copy-paste of Mosh youtuber, u try to copy his voice?? :D

[@DailyTuition]

His accent not videos.

[@sourandbitter3062]

Who doesn't use a monospace font to write code. What the hell. Why not use a cursive font while you're at it.

[@anishkulshreshtha4780]

why call reqyestAnimationFrame inside that performAnimation and pass the same method inside it ?
const performAnimation = 0) => {
request = requestAnimationFrame(performAnimation) // why passing the same method as parameter is it recursion
console.log(i++);