It doesn’t matter how awesome and clever your web animation is. If it doesn’t run smoothly at 60fps on a variety of fast and not-so-fast devices, then you have failed. The thing is this: it is very easy to unintentionally create a poorly performing animation. One of the biggest culprits here is us animating a CSS property that is not designed for smooth animations. In this newsletter, we’ll look at one such situation.

Say it ain't so, box-shadow!

Say Hello! to the ubiquitous box-shadow property. It is pretty awesome and responsible for majority of the drop shadows we run into on the web. It’s awesomeness slows to a crawl, literally, when we try to animate it. Fortunately, this property has a nearly equivalent (and more performant) variation. We have the drop-shadow filter that also allows us to add a drop shadow to our elements. The advantage of this filter is that it animates really smoothly, and if we did a side-by-side comparison of both shadow related properties, it’s hard to tell which is which:

Two drop shadows created in two different ways!

If you are just wanting a drop shadow that you’ll never be animating, it doesn’t matter which of the two approaches you go with. You’ll be a winner with both box-shadow and the drop-shadow filter. If you are going to be animating any part of your shadow like its position, size, or color, then you should go the filter route!

There are a few more general animation-related techniques we’ll need to keep in mind, so if you want to learn more about animating drop shadows beyond the brief overview we saw here, do check out the Animating Drop Shadows article and/or video for the full burrito buffet! 🌯

Looking at Animation Performance Broadly

With box-shadow, we are lucky in that a performant equivalent exists. That isn’t always going to be the case. For the longest time, you may have heard that animating opacity, transform, and filter will give you the best performance. That is still largely the case today, but some CSS properties are less bad for animating than others. The comprehensive CSS Triggers page does a great job listing how much work each property will do when animated.

Of course, I can’t end this article without sharing this ridiculously oversized image from my Creating Buttery Smooth Animations article:

Till Next Time

All right! This marks another installment of our short newsletter on web development topics. If you ever have ideas for topics you’d like me to consider writing about or just want to chat about anything web development related, drop by the forums…just like it is 1998!

Cheers,

Kirupa 🥳

In order to unsubscribe, click here.

If you were forwarded this newsletter and you like it, you can subscribe here.

Created with Revue by Twitter.