A Guide to Animation Performance on the Web

2.5 CSS vs. JavaScript Animations

You can create web animations in two ways, with CSS and with JavaScript. Now, there is a debate going on on the topic. Some people say that using JavaScript is just as effective, while other people say that CSS is the way to go. Here's what I know and what makes sense to me. As we've learned in a previous lesson, there are two working threads in the browser. The main and the compositor. The main thread handles JavaScript, styles, layout and paint. While the compositor handles the composite layers and can send these layers to the GPU for hardware acceleration. Now, this point right here should give us an answer to the debate, right? The point is to have the CPU do as few things as possible. Now, when do we use JavaScript, where does that go? What part of the browser executes it? Well, the main thread. So the main thread is where all the heavy lifting is done. So by executing animations with JavaScript, they automatically go to the main thread which is what we're trying to avoid, right? Instead, if we're using CSS animations the right way, we're able to send those animations to the compositor thread and those will be hardware accelerated. Now, if for some reason you want to animate with JavaScript, there are a few things you can do to ensure you get the best performance possible. First, make sure you animate the lowest level element, that means an element without children. This is important, because changing properties on a parent element will force the browser to do layout and paint on all of its children and that can be a very expensive task. Second, use requestAnimationFrame. This allows the JavaScript code to run at the beginning of each refresh cycle, therefore syncing the animation to the device's refresh rate. This is especially important on mobile devices that have a different refresh rate than a computer screen. Now, here's a simple example of using request animation frame. So let's say we have a div with a class development here. We're gonna add some very simple styling and then let's write a simple function that will move our element for a set distance. And actually, we need to use an ID here. Okay, so I'm gonna use vanilla JavaScript here. We're gonna use var to declare a couple of variables. I'm gonna start with a pos variable for the position. Then element will be document.getElementById('element'). And I'm gonna say, count = 0. And your position. Your position equals also 0. Okay, so then we're gonna have a function, I'm gonna call it move. I'm gonna say, if the count is smaller or equal than 1000, that means I only wanna move this element 1000 pixels. I'm gonna say new position equals position plus 1. I'm gonna say, element.style.marginLeft. So I'm animating the margin property. This is just for demonstration purpose really, new position plus, let's do pixels here. And we're gonna say position equals new position. And also, let's increase the count. Right, so next, in order to make sure that we're triggering this animation at the start of every refresh cycle, we're gonna use the function requestAnimationFrame. And when that happens, we're gonna execute the move function. Okay, so that worked. When we got a refresh cycle, the move function was executed. And our element moved by exactly one pixel and then it stopped. To make it go the full distance, well, we need to do this again inside the function. So requestAnimationFrame(move). So by doing that you'll see a very smooth animation. So this will just keep going until it reaches our target distance here, which is 1000 pixels. Any time now, there we go. So that's a simple example of how to use a requestAnimationFrame. And again, we're doing this to make sure that this JavaScript code is run at the beginning of each refresh cycle. And by doing that we're syncing the animation to the device's refresh rate, achieving a smoother animation. Finally, to get the most out of JavaScript animations, you should consider not using jQuery to create the animations but instead use a more modern, more optimized library like GSAP. GSAP stands for GreenSock Animation Platform and it's said to be a high performance animation library. You'll find the link in the lesson notes. With that said, please consider that some animations can actually only be done with JavaScript, for example, parallax scrolling. In that case, well, go ahead and use JavaScript, there is no other choice. But follow the best practices that we've talked about in this lesson, and you should still get a pretty good performance. Now, let's move on to the final lesson of this course where we're gonna have a look at unoptimized animation. We're gonna do some optimization, and then we're going to measure the results, the before and after. See you in the next lesson.