 Hey, everyone. Sam here. In this web series, we'll solve common web problems with standards. These techniques are part of the web platform and work with any framework or library. OK, let's go. If you're animating some elements, whether you're using CSS, the web animations API, or libraries which just use request animation frame, make sure you help your browser stay speedy by letting it use your 3D graphics card. Sam, what are you talking about? When you look at a website, it's made up of layers stacked on top of each other. And your graphics card won't need to redraw for changes to only some certain CSS properties, specifically opacity and transform. These two properties let you move stuff around and change how visible it is. You can animate width, color, or other CSS properties, but do it sparingly and not in response to user action, where you want to be snappy. To keep things fast, if you have elements that move around a lot, you'll also want to set the will change transform or opacity CSS property. This is a hint to the browser. This element should be a layer all the time. Otherwise, when you upgrade or downgrade to a layer, you'll incur a cost. The browser has to redraw that specific part of the page. But if you give everything in your page a layer, this might bog down your browser as it struggles to compose them all together. This is a complicated topic, and you should check out more documentation to learn more about it. And most importantly, your site doesn't need to be perfect. It won't crush your user's experience to make a few mistakes here and there. But it's good to keep on top of it. Check Chrome's rendering section inside developer tools once in a while just to see what's happening and how your site's going. This was layers the standard way. See you on the next tip. Ready?