Author: Harnaaz

Welcome to “Designing in the Browser.” In this series, we explore how to take a design, build it, and then tweak it in the web browser using the latest in web technology and design systems. Today we’re going to take a look at how we breathe life into our user interfaces using animations and interactions, and how we can scale motion principles throughout our application. Let’s dive in.

Motion on the web is a key part of any user experience. We need to be able to give a user feedback when they explore a page, whether that be via hover, focus, click, touch, or swipe. We can even provide interactions in response to user actions, like adding an item to a shopping cart. Simple interactions can be transitions between two states. Animation on the web, a similar but distinct concept, brings the user’s attention to a particular place in the UI, and can bring to light an otherwise standard web experience. It’s especially important that we have motion on the web, because a website is a digital interface that lacks real world cues, like physical touch and 3D space. These cues are what help us to understand the context of our daily experiences. However, we can imitate the physical world to create context in the web through motion principles in our UIs.

Material Design, Google’s open source UI design system, breaks motion down into three principles– informative, focused, and expressive.

Motion is informative – Motion shows spatial and hierarchical relationships between elements, which actions are available, and what will happen if an action is taken.

Focused – motion focuses attention on what’s important without creating unnecessary distraction.

Expressive – motion celebrates moments in user journeys, adds character to common interactions, and expresses a brand’s personality and style. Let’s take a look at some of these examples of motion within a UI.

We’ll start with transitions. Transitions allow for properties to change from one value to another. You can adjust the speed, timing function, as well as specify which properties are actually getting transitioned.

When you transition a property in CSS, the browser interpolates between values, meaning it calculates the steps between the starting and ending point, and displays those steps based on the speed and timing functions in between. A transition can be as simple as a color shift on hover.

I have a box here, and on hover, I’m simply changing the background color to be yellow. You can see this in DevTools by clicking on the element state here and selecting Hover. I’m also applying this to focus. You can see here that, even though the focus state is in a light gray, meaning it’s not currently active, the focus state is also getting the same style as the box on hover. You can test focus state as well with these element state tools. It’s a really nice way to test transitions on the web.

Here is an example of a material design component button. There is also a transition here when you hover over it. It is a little bit more subtle. There is a shadow that comes out of that, giving a little bit of depth to this button. But the simple transition here is that this box shadow is expanding.

So if we take a look at that, what it looks like is this. You have your box shadow, which is a little bit more of a complex transition here. And we’re specifying the transition to state what property we’re transitioning, the box shadow, the speed of the transition, 280 milliseconds, and then a cubic bezier as the timing function for the transition. When you hover over that button or focus on that button state, the box shadow changes to be a little bit more separated from the button to give it that appearance of popping off the page. This allows for a fluid transition that gives you some kind of 3D context based within physical space.

You can have multiple properties transition on any given element. And if the syntax can be calculated by the browser, like color, sizing, opacity, and transform, it’ll be a smooth transition. Some properties, like blend modes, can’t transition, because there are no values to calculate between those two states. So keep that in mind.

For the best performance, stick to transitioning opacity and CSS transforms so you don’t have to go through the entire paint, composite, layout steps when you’re applying changes in your CSS.

In this episode, I’ll be focusing on CSS-based animations. But if you’re interested in the topic of web animations in general, note that the Web Animations API provides much more power. The Web Animations API gives us key framing and timelines, meaning that we can start, stop, pause, and reverse animations, as well as orchestrate motions to start after one has ended.

CSS animations use the @keyframe keyword, and can also get pretty complex. You can use step or percentage animations to animate multiple properties at a time. Step animations aren’t necessarily fluid, think the second hand on a ticking clock. But with UI animations, we most often see percentage-based animations.

I’ll show you an example. So in this example, I’m using Glitch.com to be able to showcase the code next to the visualization of this animation. I have this ringing button, and there’s two different animations happening at the same time. There is a ring, where this icon is translating from left to right and sort of shaking. And there’s also a growing animation, where it’s scaling up. It’s also changing its container color. We’re using a couple of mix-ins here to change that container color. So we’re orchestrating both of these animations, and on the web we’re applying this animation grow onto the button itself. And then onto the icon specifically, we’re using the ring animation. So you can really make these complex. Here I’m using decimal points within a second. So you don’t just have to use percentage based on the second hand. You can really get complex here and make it as detailed as you want. Don’t think that CSS animations have to be simple. You can orchestrate them too. You just have to be careful with timing it yourself.

This example is a bit complex, but you can also have much simpler animations, and those are pretty common on the web. One shortcut I often use for animations is using the from and to keywords to stand in for 0% and 100%. That’s a pretty common thing when you want multiple properties to maybe transition at the same time, and just want to quickly throw them up in an @keyframe statement.

But what do these techniques look like within the frame of our motion principles? Let’s start with the first principle– motion is informative. We can use motion to create connections between elements and actions. The material design ripple is a great example of this, and I’ll show you what that looks like.

So here we have a layout. This is the material theme builder, where you can adjust properties like shape, color, and typography, and see what that looks like with all of these different components on a single page. Now, if I click on this button, you’ll see that wherever I click is where the ripple starts, and it then extends to the rest of the element. So it’s a response to the user. It’s this reaction to where the user is clicking on this UI. And that’s really nice, because we are creating this visual digital response mechanism to user input. You’ll also see a ripple in this card example. When you click throughout the card, you see that wherever I press is where the ripple starts and expands throughout that section. But the card is broken up into various sections. There is this main section, which is where we have an image, a headline, some text. That might be a link into a post, for example. We also have this bar here with buttons. Those buttons might represent actions. So we want to be able to separate the place that we click within that card with the action that’s taken by the user. So having that ripple expand and also a different state change, that color change that happens once we click, that helps the user to understand there’s different possible actions within the same element within a UI.

I also love the animation in the material checkboxes. That’s one of Disco’s favorite too. Here’s a demo with a data table. In this data table, we have the checkboxes. And you can see, as I click the checkbox, the little check pops in, it animates, and it’s really nice, the little user experience gives that feedback. We also see that the background of this element changes to a light purple color and this theme. And that indicates that the item is selected, along with the checkbox. When all of these items are selected, this top checkbox will also be checked, because every item inside of that is selected. If we deselected all of those, we see they all animate out the same time. So having this motion really helps to bring the user’s attention here.

Another item that’s important in motion is how it connects various elements. So here, we have a chip, and this chip is a filter chip. When we click the ice cream, the checkbox pops in, not only in that ice cream chip, but also in the items inside the data table. So it creates this really nice uniform interaction inside of this component, even though they’re two different elements that are interacting with each other.

This allows for this idea of a physical space, these physical interactions, these physical connections to be translated onto the web in a way that’s a little bit easier for you and for your users to understand.

The second principle is that motion is focused. It captures a user’s attention. Here are two examples of animations which call to the user’s attention. The first one we just looked at earlier is that ringing button. It brings the user’s attention to a possible action. In a floating action button, users can click to take a single action, or click to expand for a variety of actions. So this ringing floating action button brings attention to itself and asks the user to respond. The ring and grow animations being applied at the same time make this possible. They bring this fab to life.

Here’s an example of a shiny shop button which has a subtle sheen that just goes from left to right across it. And we’re using linear gradients to do this and this skew transformation. So here, we can see that that skew is translating from 0% to 100%. The animation is happening from 0% to 10%, and we’re then pausing. So it’s not repeatedly happening. So it’s going from 0% to 10%, and then we’re waiting till 100% to start over that little sheen across the button. But this also calls to the user’s attention, calls to that action button of adding to cart. And it’s just a little subtle nod to your user to pay attention to a specific place in the UI.

If you want to play with some of these examples, all of the links we’ve provided below for you to check out, remix, make them your own.

• Understanding Material motion principles: https://goo.gle/33kzdE5
• Material Theme Builder: https://goo.gle/32qGoJs
• Material Starter Kit: https://goo.gle/2CjKmcn
• Material Data Table with Chips: https://goo.gle/2NMeRx0
• Ringing Button: https://goo.gle/34EHi6R
• Shiny Shop Button: https://goo.gle/33rlc7t

And finally, the last principle is that motion is expressive. In the previous example, the ringing button can bring a little personality and fun to an interface while also being informative.

I love these examples from the material.io spec that demonstrate how motion adds character and appeal to interactions. Motion on the web helps users to understand your app. It’s not just for flair and effect, but for a better user experience.

I hope today’s show helped you see how motion can be integrated into your application as something that’s informative, provides focus, and adds brand expression. What are your favorite examples of motion design on the web? Leave a comment below. We’d love to see them. Until next time.