Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
Frontend Development + Web Design

CSS Animation and Shadows

By:

Nick Stewart
Nick Stewart

on 2/18/2019

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.

Something else to note, box-shadows can lag devices when scrolling as well. Animating and moving elements with box-shadows should always be developed with performance in mind.

Share to

Related Posts

Websites
What's the JAMstack?

By:Alec Robertson

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 »
Custom Bootstrap Shortcodes for WordPress

By: Natalie Miller on 6/27/2017

Bootstrap shortcodes are a quick way to make your WordPress content more dynamic.

Read More »