How to Keep Web Animations From Slowing You Down

Animations can add tremendous value to the user experience on your website or application, but there are certain properties that just slow things down. In the article “ High Performance Animations,” Paul Irish and Paul Lewis write about 4 things we can animate to keep our application performant, which are:

• transform: translate()
• transform: scale()
• transform: rotate()
• opacity

I wanted to dig into this a little further, so while animating common navigation patterns, I used those 4 properties above as a constraint. And to check performance, I used Chrome DevTools to monitor the frames-per-second in the timeline. So today I want to go over a few examples of animations, and how you can make sure they’re actually benefitting the end user. (As we dig deeper, keep in mind that while these 4 tools can help provide quick metrics, you shouldn’t be afraid to use the most human of tools: your eyes.)

Here’s a notification dropdown that combines various effects to create a performant interaction. The bell icon rings when you open the dropdown, and each item has a subtle animation. Also,  the hover effect on the media element adds a scale animation. It’s an exaggerated effect, but I wanted to push the animation performance.

Looking at the timeline, this passes all our performance tests. And because the effect on performance was so small, we could continue adding more animations.

Aside from the subtle variations to layout and animation — accounting for a sidebar and animating the hamburger menu — the sidebar menu is similar to the notification dropdown.

In this example, animating a sliding sidebar was an issue, and using transform could have fixed that if the animated sidebar covered the main content. Instead, the sidebar squishes the main content as it animates. In this configuration, animating a slide-in effect would cause repaint of the entire website during each frame of the animation, which could cause a significant hit to our performance. Alternatively, animating the hamburger icon and the navigation content by combining a fade-in and slide-over effect will accomplish a similar goal, while maintaining good performance and ultimately providing a better user experience.

Keep Your Eye on Your Animations

As I worked through those examples, I realized I can do almost everything with the constraints in place. You can slide, flip, bounce, rotate, and fade while keeping the animations running smoothly and efficiently. As you work on your own projects, be mindful of the effects animations have on performance. Try to limit yourself to transform and opacity properties to keep them performant. Most importantly, don’t forget about the ultimate goal — an enjoyable user experience that keeps them wanting to come back.

Let us know your thoughts on how you use web animations in your projects in the comments section below and be sure to check out our CSS3 animation course, Adventures in Web Animations. (tip: click “View Discussion”)!