The new [Apple Vision Pro](https://www.apple.com/apple-vision-pro/) has been a lot in the news lately. This new device comes with a new design language in the new [VisionOS](https://developer.apple.com/visionos/). One of the key characteristics that stood out to me was the “frosted glass” backgrounds being used everywhere. Whilst looking great, not all people will appreciate this as they may find it difficult to see.
![A person using the Apple Vision Pro showing three transparent screens around them](/img/articles/your-user-does-not-prefer-your-design-apple-vision-pro-glass-ui.webp)

Since the backdrop-filter CSS property was added with a value of `blur()` we can create the same frosted glass effect on the web. So this got me thinking, is there a way I could still use this, but only when the user doesn’t mind? It turns out, there is a Media Query for that!

## `prefers-reduced-transparency` (experimental)
You can use the experimental Media Query `prefers-reduced-transparency` to alter your design based on the preference the user sets on their device. This can be either `no-preference` or `reduce` and can be changed here:
* In Windows 10/11: Settings > Personalization > Colors > Transparency effects.
* In macOS: System Preferences > Accessibility > Display > Reduce transparency.
* In iOS: Settings > Accessibility > Display & Text Size > Reduce Transparency.

For example, you can do this:

```css
.blurred {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-transparency: reduce) {
  .blurred {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10);
  }
}
```

As you might notice, I don’t completely remove the transparency. I mean, you could, but the key part in this media query is the word `reduce`. You can still offer the nice design you want, but with the users preference in mind.
## Other Media Queries for user preferences
There are a few more Media Queries, some experimental, for user preferences. A quick overview:
### `prefers-reduced-motion`
Many users might feel nauseous when large elements on the screen are animated. They might turn on reduced motion in their system settings. Your browser can detect this and you can provide a reduced version of the animation:

```css
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated {
  animation: slideDown 500ms ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: fadeIn 200ms linear forwards;
  }
}
```

Here we still have an animation, but it’s a simple fade of 200 milliseconds.
### `prefers-contrast`
A large portion of you users may find difficulty in reading the text on the screen with low contrast. Besides having a solid contrast as a base, you might want to provide an increased contrast for people who have that setting turned on as they need it. You can increase the contrast for those users like so:

```css
.article {
  background-color: #cfcfcf;
  color: #444444;
}

@media (prefers-contrast: more) {
  .article {
    background-color: #ffffff;
    color: #111111;
  }
}
```

Naturally, you can change a variety of CSS attributes to increase contrast.
### `prefers-color-scheme`
Probably one of the better known Media Queries is `prefers-color-scheme`. This Media Query allows you to change the styling based on whether the user is using “light mode” or “dark mode”:

```css
.page {
  background-color: #ffffff;
  color: #111111;
}

@media (prefers-color-scheme: dark) {
  .page {
    background-color: #111111;
    color: #ffffff;
  }
}
```

### `prefers-reduced-data` (experimental)
The user preferences might not even be visual. By using `prefers-reduced-data` you can reduce the data consumption of your styling. For example, you might decide to not load a custom font for these user or load a smaller image size for a `background-image` (or perhaps even none at all):

```css
.header {
  background-image: url('large-image.png');
}

@media (prefers-reduced-data: reduce) {
  .header {
    background-image: url('small-image.png');
  }
}
```

## Work together as developers and designers
Many of these Media Queries require a joined effort from both developers and designers. For example, when implementing the `prefers-reduced-motion` Media Query, both disciplines have to create an animation with reduced motion together and test it with actual users who’d benefit from this. As developers, I feel it is our duty to raise awareness at the designers we work with about these possibilities on the web to create a better user experience for all!

Your user doesn’t prefer your design

A few weeks ago I was lucky enough to visit the Google Campus in San Francisco through the Google Developer Expert program I am part of.
![Dave bitter on the Google Campus in San Francisco riding a Google bike](/img/articles/view-transitions-api-animated-interactions-dave-google-campus.jpeg)
There, [Una Kravets](https://twitter.com/Una) showed [a demo](https://codepen.io/una/pen/eYbOOQp) she built using the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) to animate the deletion of cards. This excited me to look at using the API for not just page transitions, but more for micro animations!
## Give feedback to the user
As always, I made to see what we can do with this approach:

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjwgdRZ" data-user="davebitter" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/davebitter/pen/JjwgdRZ">
  View Transitions Animate Cards</a> by Dave Bitter (<a href="https://codepen.io/davebitter">@davebitter</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

[View on CodePen](https://codepen.io/davebitter/full/JjwgdRZ)

First, I created a layout like I would normally do. Next, I wrote some JavaScript to remove a list item with a small delay to see it get the checked state first. Removing an item looked like this:

```jsx
list.addEventListener('change', (e) => {
  setTimeout(() => {
    removeListItemFromInputChangeEvent(e)
  }, 300)
})
```

![Screen recording showing an item being removed and the grid of cards immediately snap into place](/img/articles/view-transitions-api-animated-interactions-removing-unanimated.gif)
The user experience of removing an item is not great. Because the item is removed, the item next to it now takes it place. Suddenly, this item is in the place of the removed one which makes it look like it was always there. What if we can remove it, have all the items neatly animate to their new position and by doing that give the user the proper feedback they need? In the past, this took quite a bit of JavaScript to do and even then it worked a bit janky. Now let’s (technically) add two lines of code. First, wrap the call of the remove function in a `startViewTransition`. For good measure, we’ll also feature check to progressively enhance the user experience. Meaning, if the View Transitions API is supported, we enhance the default behaviour with a nice animation:

```jsx
list.addEventListener('change', (e) => {
  setTimeout(() => {
    if (!document.startViewTransition) {
      removeListItemFromInputChangeEvent(e)
    } else {
      document.startViewTransition(() => {
        removeListItemFromInputChangeEvent(e)
      })
    }
  }, 300)
})
```

Next, we add unique name to each of the list items:

```jsx
<li style="view-transitions-name: card-1">
  <label>
    <input type="checkbox" />
    Check this card
  </label>
</li>
```

Now if we delete an item, we see this behaviour:
![Screen recording showing an item being removed and the grid of cards animate into place](/img/articles/view-transitions-api-animated-interactions-removing-animated.gif)
With just adding the `document.startViewTransition` and a unique `view-transitions-name` for each list item, the entire grid repositioning is animated providing better feedback to the user. Awesome, right? One of the biggest benefits I find of this approach is that the View Transitions API just takes a before and after state. It doesn’t matter how you build your layout, what properties change or how different the two views are. As long as before and after your change (the removal of the one list item node) items have matching `view-transitions-name` properties, the browser will animate between them.

Now, let’s add a button that allows you to add a new item:

```jsx
addButton.addEventListener('click', () => {
  addListItem()
})
```
![Screen recording showing an item being added and the grid of cards immediately snap into place](/img/articles/view-transitions-api-animated-interactions-adding-unanimated.gif)
We see the same unanimated behaviour as previously when deleting an item. Now let’s add the `document.startViewTransition` again:

```jsx
addButton.addEventListener('click', () => {
  if (!document.startViewTransition) {
    addListItem()
  } else {
    document.startViewTransition(() => {
      addListItem()
    })
  }
})
```

![Screen recording showing an item being added and the grid of cards animate into place](/img/articles/view-transitions-api-animated-interactions-adding-animated.gif)
As you can see, now when an item is added, the rest of the items animate to their new position. We can even add a bit of JavaScript that will randomly reorder the list and see what this technique will do:
![Screen recording showing an items being randomly reordered and the grid of cards animate into place](/img/articles/view-transitions-api-animated-interactions-reordering-animated.gif)
## Some other use cases
While having a grid of cards that may be filtered is a pretty common use case, you can naturally take this approach to other interactions as well. More than likely, you are working/have worked with tables. When adding to, removing from, sorting or filtering these tables the rows may change position. When calling the `startViewTransition` you can animate the changing of the rows like so:
![Screen recording showing an items being reordered, removed and added and the grid of cards aniamte into place](/img/articles/view-transitions-api-animated-interactions-table-animated.gif)
You may have noticed I added a toggle to this demo for showing the items in a grid or underneath each other. When switching, that looks like this:
![Screen recording showing the grid of cards toggle between grid and table view and immediately snap into place](/img/articles/view-transitions-api-animated-interactions-toggling-unanimated.gif)
I though to myself, why not use this technique when switching between the two views?
![Screen recording showing the grid of cards toggle between grid and table view and animating into place](/img/articles/view-transitions-api-animated-interactions-toggling-animated.gif)
## Start using this now
It has never been easier to animate between different views on the page. Whilst animating between pages might be a bit much to start with, try implementing the View Transitions API on a smaller part of a page to make smoother experiences in your web application whilst simultaneously providing feedback for a user’s interactions through animation. It only takes a line or two!
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjwgdRZ" data-user="davebitter" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/davebitter/pen/JjwgdRZ">
  View Transitions Animate Cards</a> by Dave Bitter (<a href="https://codepen.io/davebitter">@davebitter</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

[View on CodePen](https://codepen.io/davebitter/full/JjwgdRZ)

Make awesome animated interactions with two lines of code

I am a Senior Front-end Consultant, Developer Advocate, and Google Developer Expert for Web. Here, you can find my resume, a collection of my articles covering a wide range of topics and get in contact.

Articles