MoreLesson 277Free preview

JS Animations

This lesson is part of How To · All levels

Summary

JavaScript animation moves or changes elements little by little in many frames. requestAnimationFrame asks the browser to run a function before the next frame, so the movement is smoother than the setInterval. For simple animation, CSS is often lighter, but JavaScript is useful when movements need to react to data or complex interactions.

Key points

RequestAnimationFrame runs the callback right before the browser draws the frame.
The timestamp of the callback is used to calculate the animation progress.
CancelAnimationFrame has stopped the animation that is still running.
Animate the transform and opacity so that the browser doesn't re-compute the layout often.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.