Animating Slack reminders with the View Transitions API

Slack recently added a new “Later” section that groups any reminders you’ve set. As a procrastinator, I’m a big fan. If something comes up while I’m in the middle of a task, I can set a reminder. Slack will add it to the “Later” section and bug me about it after a predetermined amount of time.

But there’s one part of the interface that always confused me: You can snooze a reminder, and it will drop down to the bottom of your list. But there’s no clear visual cue that anything has changed, so I often end up interacting with the wrong reminder after they’ve been reordered.

Here’s a video of me trying to snooze multiple reminders:

I’m often distracted when using this interface, and my brain just wants to work its way down the list, snoozing each item. If I’m not paying attention, it’s pretty easy to miss the fact that the items get re-ordered. I snoozed five items; why are two of them still un-snoozed!?

I’d have an easier time navigating this interface if it were more obvious when things changed. One way to make these changes more obvious would be to animate them.

I put together a simplified version of the “Later” interface and added some animations to see how it would feel. Try playing with this demo:

You can see that the animation makes it a lot easier to tell when the order of items switches.

Some users may prefer reduced motion when browsing the web. You can detect this preference using the prefers-reduced-motion media query. It’s important to respect this accessibility preference and turn off or reduce animations when a user chooses to reduce motion. The demos on this page have animation turned off for those who prefer reduced motion.

This demo was animated using the magical AutoAnimate library from Formkit. This library will automatically animate elements when they’re reordered, and it weighs in at just 5.6kb gzipped. It’s really cool, but it would be even coolor if we could do this without a library.

The good news is that there’s a new browser API that will let us do this with just a tiny bit of custom code.

The View Transitions API is my favorite feature to come to the web in a long time. It’s a native browser feature that enables easy page transitions for single-page apps and multi-page apps!

At first glance, that might seem irrelevant: we’re not transitioning between pages. But clever folks like Chris Coyier noticed that you could use this same API to animate UI changes. With just a dash of JavaScript we can recreate and customize the demo above using View Transitions.

First off, we need to add a unique view-transition-name to each of our list items:

<li style="view-transition-name: item-1">...</li>
<li style="view-transition-name: item-2">...</li>
<li style="view-transition-name: item-3">...</li>
Code language: HTML, XML (xml)

Then we need to wrap our JS code that updates the DOM in a startViewTransition callback.

document.startViewTransition(() => {
  // Run our code to update the DOM
});
Code language: JavaScript (javascript)

Before doing that, we should check for browser support and ensure the user does not prefer reduced motion:

// Check for browser support
const viewTransitionsAreSupported = document.startViewTransition;

// Don't use animations if the user prefers reduced motion
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if(viewTransitionsAreSupported && !prefersReducedMotion) {
  document.startViewTransition(() => {
    // Run our code to update the DOM
  });
} else {
  // Run our code to update the DOM
}
Code language: JavaScript (javascript)

Boom! That’s it! If your browser supports View Transitions the items will now animate. Check this out in Chrome, Edge, or Arc to see it in action:

See the Pen Slack "Later" UI – View Transitions by Paul Hebert (@phebert) on CodePen.

As you can see, animation can be a powerful tool for communicating changes in your application, and the View Transitions API makes adding animations to websites easier than ever!

Okay… I guess I should go deal with those reminders now…