Lesson Code: http://www.developphp.com/video/JavaScript/WAPG-4-Script-Based-Animation-Programming-JavaScript-CSS-Tutorial
Learn to program script-based animations with JavaScript using requestAnimationFrame, cancelAnimationFrame, setInterval or setTimeout. Using timing methods provides a greater level of control over how things animate on the screen and is ideal for video game development and other interactive animated applications. requestAnimationFrame is a method that invokes a callback function and uses the browser software’s display refresh rate which is usually 60 Frames Per Second.
Original source
24 responses to “WAPG 4 Script Based Animation Programming JavaScript CSS Tutorial”
hello, i copied your code exactly & while yours is only slightly moving over 1 px at a time mines moving 3500px each time? have no idea why. even tried setting it to 0.00000000001 & it still does the same thing? any ideas
How can you make the speed to be constant and not increase when you click more times the Right button for example?
How to write code clockwise and anticlockwise direction….
I completed the Home Work which you given.
You are a Paradise Teacher
O that's i want . thank you so much @Adam Khoury
Thanks for the tutorial. Very helpful.
Hello Adam, I do not know if you will see this or not, but I just want to tell you that I started coding from 0 with you and your tutorials. now coding became one of my passions. I will always be grateful and thankful because you are one of the most amazing teachers I have learnt from in my entire life. Stay awesome Adam and thank you so much for your time and your effort.
looks like it doesnt work with addEventListener('event', function(){});
Hello,how I can make an animation with a text,look like up to down
Hope you do a ECMAScript 6 tutorial. that would be the baddest tutorial in youtube. I believe in you, you're the best teacher.
Hello Mr. Adam I cant sign up at web intersect so am asking you a question here..1) How to make a button which changes its link after 100 people have clicked it from different places??2)how to make a email form which emails in mass ( i mean i paste number of emails in just one text box and post the same email to all)??
Pls pls help me If u have already made a video on that then it would be great if u share the link with me…thanks
I like it!
dear friend maby change u screen on black/white 🙂 coz that one its painfull for my eyes
nice tutorial, thanks
Thanks for this great tutorial, I really learned a lot. Here's the practice http://codepen.io/pamcy/pen/KaJyrV
Hello adam .Thanks for give us your tutorials.I am learn lot of new things for your help…
I asks a question how to create a slow motion effects ?
thank you again..
Hi, is there is a way that I can have responsive canvas from adobe animate cc
nice tutorial but i have a question that – if i pass value directly to the function in button tag for example startanimation(right or left ); in my case it is not working and i am also taking a value as a perimeter in function startanimation(). ?
thanks i was really waiting for this
Varying degrees of knowledge aimed on these videos, what I did get from this though is how to use the requestAnimationFrame. I've been using setTimeout and haven't bothered looking up how requestAnimationFrame works.
Welcome back buddy, we good to start learning again from you thx Bro
whatup adam, you good bro?
you've been at it for a while now, I've learned a lot from you, thanks buddy, keep it up, I'll always refer people to your channel.