From the course: CSS: Scrolling and Parallax

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Request animation frame

Request animation frame - CSS Tutorial

From the course: CSS: Scrolling and Parallax

Start my 1-month free trial Buy for my team

Request animation frame

“

- [Instructor] There's a special method that you can use in JavaScript to make sure your animations sync properly to the browser. Now this is called requestAnimationFrame(). This method can call another function which is called a Callback, that will perform your animation. Now this Callback will be passed a timestamp of when the animation happened in relation to the beginning of the document's lifetime. But you don't have to use this. It's called "DOMResTimeStamp." Again you don't have to use it, but it is provided for you and it's sometimes useful in some instances. Now there is another really interesting and useful method that we can use in JavaScript. This is the "getBoundingClientRect()" method. And we can use this to determine the position of an object. Now this is going to return a rectangle, which allows you access to all of these dimensions. Now we can bind this with requestAnimationFrame, and we can use it to…

Contents