Recently I was working on a menu for the mobile version of a website and the menu had a box-shadow effect. This shadow looked nice, however when the menu was animating in, it would lag and was janky on mobile devices. In doing some research to figure out how to make it less laggy, I came to the conclusion that you really shouldn’t animate box-shadows if you don’t have to. However, it can be done.
Tobias Ahlin has a great article on animating a pseudo-element instead of the box-shadow property, which will limit the amount of repaints and give you smooth performance. Basically by doing this you are targeting opacity, which along with transform, are the only two CSS properties that do not cause a repaint. The pseudo-element is sitting there with the box-shadow, however it’s opacity is at 0 and on the trigger (so let’s say however) the opacity is changed, which animates the box-shadow. Another article by Joshua Bemenderfer also talks about this approach. Doing this adds extra work, but for mobile devices and my menu example from before, it is worth it.
What's the JAMstack?
As a front-end developer in 2020, it is time that I fulfill the FEDeral mandate that I publish words regarding the JAMStack. If you follow too many developers on Twitter, it’s likely you’ve heard about the Next Big Thing in web development, but I’d like to put this trend (fad? movement?) into context to better understand what’s truly new about this approach and whether it’s worth using.Read More »