Reducing motion

Posted in Accessibility, Design and Development

There has never been a lot of animation on my website, and that was a very deliberate decision. Accessibility is very high on my list of priorities when designing and developing a website, and motion and balance (vestibular) disorders—permanent or temporary—mean that animation can be very uncomfortable for some people.

That said, I do have some animation on my website. No parallax scrolling or items flying into view as you scroll down the page; certainly not! But I’ve taken steps to reduce it by:

  1. Removing animation entirely where it didn’t really serve any purpose or add any character, for example links used to have a very slight animation to smooth the colour change on hover
  2. Stopping animation completely when someone has their operating system set to reduce motion (on a Mac it’s in System Preferences → Accessibility → Display → Reduce motion)

There are only a handful of moving parts left on my site, now that number 1 has been taken care of:

  • The underscore on the logo blinks every couple of seconds, to make it look like a cursor
  • When opening and closing the navigation on mobile screens two things happen:
    1. The three lines in the icon animate to form a cross
    2. The navigation menu is revealed smoothly
  • Upon focus, the search button grows to fill the whole navigation bar, covering the navigation items

The prefers-reduced-motion media query allows us to prevent those animations. As an example, here’s the SCSS to show how I disabled the animation for the underscore/cursor in my logo:

.underscore {
animation: blink 2s steps(20, start) infinite;

@media screen and (prefers-reduced-motion: reduce) {
animation: none;

prefers-reduced-motion was introduced to Safari in 2017 and has pretty good support across browsers.

My advice would be to be conservative with your use of motion on your website, but, where you do use it, be sure to offer a reduced or zero motion alternative for those who ask.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that's not enough, have a look at the full list.

  1. Lazy loading images without JavaScript

    Non-JavaScript lazy loading is a great progressive enhancement for image-heavy pages on the web. Just a simple HTML attribute and you’re away!

  2. The briefest of histories of responsive images

    There are a lot of things to consider when using images on the web. But why is it so complex? And how can we tackle that complexity?