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

Frontend Development
Dive into the Sanity Structure Builder

By:Mark Biek on 6/13/2021

Sanity is the super fast, super customizable CMS that we're using as the backend for the new via.studio website. One of the more powerful concepts that Sanity is the ​Structure Builder which gives you the ability to customize how content is presented in the Sanity admin.

Read More »
Email
Email @ 50: Email Development
Email @ 50: Email Development

By:Nick Stewart

Email development has always been the bane of a web developer's existence. You have to use outdated methods and don't have access to the full modern web to create a nice looking email that thousands of people will see. It's like asking a Nascar mechanic to create a car using only tools from the 90s - it can be done but its more than a pain.

Read More »