Composable Animation

:

Video

Dec 11, 2018
1:30 pm
ET
SVA Theatre

Design Systems have changed the way that developers and designers collaborate on fonts, colors, UI structure, forms and the like. So why does it feel like animation in a design system always falls short? The animation section usually lays dormant aside from a "fade", or we craft one-offs for a perfect experience, but each perfect experience becomes less perfect because they don't share the same language. In this talk, we'll break down exactly how to build animations so that they're composable, extendable, and can be used for a multitude of purchases, and still maintain cohesion. We'll talk about how animation in specific requires teams to work together because it's an intersection of design and development: it's harder to throw over a wall. We'll break down exactly how to make it all fit together, for the most seamless collaboration between you and your team.

Sketch Notes

Composable Animation

Artist: Natalya Shelburne

Transcript

Nathan Curtis:

We’ve got Sarah. So Sarah really might not need an introduction. She is a vaunted member of our community. She is a writer for — I’m going into my wrong notes here. Sarah Drasner, this is like a whole resume like if you did one of these things you’re a superstar. She’s a dev advocate at Microsoft, she’s a staff writer, she co-founded the web animation workshops and she also is one of the founders of a conf in Nigeria for developers, they’re looking for sponsors. She’s really an authority. When I think of Sarah Drasner knows her JavaScript, knows animation, help us learn. Thank you, welcome Sarah.

applause

Sarah Drasner:

Thank you, Nathan. That was awesome. I am so excited to be here. Well, I’m really excited to be here for the food. I love New York food. There’s so many different kinds. I live in the middle of no where in Colorado so when I come here I’m like every single meal has to be extraordinary. I’m also really excited to be here because I’ve followed this conference for so long and it’s just incredible. Every year I’m just like filled with FOMO so I really thank Jina for inviting me this year. Everybody give a round of applause to Jina for organizing.

applause

Sarah:

All right. Without further ado let’s talk about composable animation. So before we talk about animating the web, let’s first talk about the goal of the web. The goal of the web is first and foremost about communicating. And when we communicate we share memes to create joy or laughter, we might share politics to talk about confusion and fear, but first and foremost we’re talking about communicating on the web. So why then do we talk about animation? Well, let’s think back to your earliest sensory memories. Let’s think about the first times you felt happiness, sadness, fear, curiosity. Think about the first times that media, not something in your life, but media made you feel any one of these things. Could it have been spirited away making you feel happy or sadness in Up or fear from Toy Story or maybe it was Wall-E for curiosity? How about something that made you feel all of them?

Video voice 1:

That’s very nice. Come here, you.

laughter

Sarah:

We have fear.

Video voice 1:

Nothing is coming out of the closet to scare you anymore, right? Good-bye, Boo.

Video voice 2:

Kitty.

Video voice 1:

Kitty has to go.

Sarah:

We have sadness. Curiosity.

You see, emotions attack to the limbic system making things easier to recall. So if I asked you what happened on a random day when you were five years old, you might not remember that but if I asked you to sing the words to Hakuna-Matata you might. These cartoons may have seen like line drawings but they gave shape and color to our imaginations and brought life to our internal worlds. Part of the reasons why it could do this why it was then so exciting to me and why it’s still so exciting to me today, is that anything can happen. And that’s why when we talk about what’s possible on the web and how we can make anything happen on the web, we talk about animation. I’m Sarah Drasner and I work for Microsoft. I stated before I’m on the view core team and I also work for CSX tricks. Let’s talk about beautiful animations into your design systems. One of the things we talk about when we talk about animation was those characters and how those characters made us feel and branding is not dissimilar from those characters. We’re giving shape and life to a company. So these disparate elements of typography and color engage us and make a company have meaning, give that company a character. But only when we employ motion do we really bring our site to life. So consider this example where motions an intrinsic part of the experience. It’s not secondary, it’s not additive, it’s not tacked on, and it’s as important an element as typography is on this site. So let’s do a quick comparative study. If we look at something like this, which is this really awesome demo by code drops, they have all of these different types of ways of bringing in an image on the side as you hover and each one is different. It’s the same kind of eggs month, the same thing is being revealed, something from the side. But the way that that motion comes in communicates a different type of branding, a different type of experience. And the other thing I want to point out here is the timing is different too. So when people say something like .3 seconds for every single animation, don’t listen to them. Because some of those bounces and pops, they take longer, right? They can’t take as quickly as the first ones where we’re kind of staggering through things. Those things are a piece of that too. So it’s not really a one-size-fits-all thing. Which is kind of a bummer. You want just do it this way, but that’s not how those things work. Also those bounces have life and energy too. If you have a site like Mailchimp, it might make sense to do something friendly like a bounce but if you’re a bank you don’t want to would to the site and be like everyone is playing with my money, what’s going on here. So what’s the deal about easing? Easing can completely change how your animation is expressed and here’s where JavaScript shines a bit over CSS. Animation can be expressed along this curve which gives us some flexibility so that’s pretty cool. But in JavaScript we’re not limited. I would have to write these as key frames that are individual, this is one line of code that I can configure and I can make elastic and I can change those configurations and change all of the different styles and I can even make custom eases. Don’t ever do this ease. This is crazy. Or maybe do and be like the person who makes the site with the horrible eases and everybody goes there just to see that. So we’re not limited to one type of ease along one type of path. It’s really expressive.

There’s also another type of animation that people don’t talk about quite in the same way, because it’s not dealing with eases. But this is react motion, there’s tons of libraries like this, but what this is good for is for gesture. It’s not good for sequentially based animation where you’re orchestrating a lot of things that happen at one time. It’s really good for single movements that you would like to look realistic and you can see it’s interruptible so that’s really good for gestures you can actually interrupt it midstream which is not possible with some of those sequentially based animations. All of these code samples are open source and I also wrote an article on CSS tricks that’s a comparison for animation technologies. I can spend this whole time comparing technologies so if you want to check out those resources you can go into more depth there. My suggestion is to not just define one ease. Just like you wouldn’t just define one type of color for your palette. You decide on a primary brand color and then you have a bunch of different colors. Let’s say it’s green and you have a bunch of different greens that you’re using and you have a strong accent color to let people know something is different, pay attention. So we can do that with eases too. We can have a bunch of different eases that are kind of along the same lines and one thing that’s like hey, look at this. Something’s new, something is different. So if we have — I made this demo to show this. So if I open this map marker and you can see all of the eases are kind of the same even though we have staggering and we have the e-mail and the submit and these two become the loaders which in turn become the success. And the only team you see a different ease is that bounce. That bounce was the only time I did something different. All the other eases are the same. And that bounce is there to show you hey, something is different. Something worked. Dopamine rush for you and letting people know that that form worked. So in order to not reinvent the wheel and I actually stole this slide from Jina. This is a really great slide because it does kind of express the reason why we create these design systems, right? We’re trying not to reinvent the wheel. We’re trying to make sure that the button over here is not being remade on every page. So we do want to create the beautiful defaults. I worked on design systems in large companies, I was also a consultant for a bunch of design systems in many companies and what I noticed was people would really care about the typography and the color and the spacing and make good defaults for those, but animation? Man, animation was not very well taken care of. It just wasn’t. If we’re going to extend that metaphor even further, if we’re going to create wheels, we have to not put the cart behind the horse. We need to start to understand the animation before we put them in our systems and start to learn how things are being used so make a few things before we put the things in and before we make those beautiful defaults. You wouldn’t decide on a font or a typography before trying it in some mock-ups, right? So we shouldn’t do that for animation. And this is what I mean by this. Every single system I’ve worked on has this animation. Why? When are you ever using this? I’m sorry that’s like tough love. Nobody is turning things upside down yet everyone is shipping this code. Yet I don’t see things — let me go back. Yet I don’t see loaders that become successes in any systems, in any systems. That’s crazy. That’s something we all need. Consider it this way. If your brand is a character and you’re having a conversation with a user, when you submit a form and that submit button doesn’t do anything when you click, that’s basically like someone walking up to you handing you a business card and dropping it on the floor and looking at that. That’s what that exchange feels like. When I give somebody my information it’s kind of scary to do that. I’m giving you my e-mail and if nothing happens from that exchange and it just freezes on the screen, I’m that user who’s clicking the button a bunch of times. Like you want to let the user know you’re on it. This is another codepen I made where you’re filling out your name and your e-mail and details, but the submit button becomes a loader which in turn becomes a success and lets the user know hey, we took care of you. It also cuts down on perceived wait time. So your users are always overestimating those passive wait times. This cuts down because it allows them to think look, I’m taking care of you. Something else is going on.

So we should have an opinion on animation. Having an opinion on animation is really important to bring that character to life. So what does having an opinion for animation look like? So it may be for you motion complements the gradients on your site by shimmering. Or maybe for you it means revealing with a slide in hiding things in an overflow hidden so that things are slowly being revealed to you every single time you see something. So there’s a lot of different types of movement in that one example, but they all come in revealing with a slide. Or maybe for you motion staggers, wherever single time there’s an entrance or an exit, it’s always staggering, and there’s always a consistent delay between how that entrance or exit is made. Or maybe for you in your brand you use blur to show what’s important and to say what’s not being used and what’s hiding in the background so you can kind of let the user know this thing is the thing you should pay attention to. Don’t pay attention to the things that aren’t important. Or maybe you use filters to chief beautiful animation effects. Maybe you are a high-class site and you’re showing something really super high class and you want to say hey, okay, this is something really particular and beautiful and unique. So here’s one I made in react where it is a bunch of page transitions. And the thing I’m using again and again to show that’s a little bit particular is the screen. So I’m having a bunch of different lines drawn with red, green and blew and they’re slowly exposed one by one so you can see each one. Keeping that effect consistent between each page. Again, all open source code that you can check out later. So look around you. Study reality. Watch water drip, watch shadows dance across the wall. Look around you for all of these pieces that can bring physicality to your brand, can make it really feel like it has substance and meaning and depth, it can bring the next dimension of your site to life. And so I’m going to state an unpopular opinion, even though it’s an unpopular opinion, it’s actually shared by other experts. Stop using material design as your motion design language. It is not your motion design language. When you look at that motion design language, you look at it and you say Google. Now that is good branding. That is not your branding. You are spending so much money on your site to make an impact, to make people feel like it’s you, to make people understand so that emotions attach to the limbic system so they can call you. Any time you’re using Google for your motion design language, you’re missing out on a chance to be memorable as you, as your brand. So how much you have an opinion, I made this code pen to show an example. It has a bench of dos and don’t so you can write down your thoughts and collaborate and make some rules, make some defaults and you can communicate them. If you work on design systems the most important aspect for adoption as you know is communication. But also knowing your audience. So in terms of this motion design documentation, there’s a lot of pieces of code in here. And I talk about developer standards and things like that. So this type of documentation would be geared towards design collaborating with developers. It’s important to define your audience for documentation early. This is from Val Head. She’s the person I collaborate with for web animation workshops as well. When we talk about documentation, you have to consider if it’s for developers, talk a lot about the code. If it’s for marketers who are finding external vendors to create micro sites, then it’s going to have to do more with look and feel. So communicating that motions a really big part of it as well. In engineering we have this term called BDFL. It’s benevolent dictator for life. That’s the reason why we use an acronym. Have someone who really cares about the animation and makes sure that it gets expressed, but also have some support. Have people who believe in it as well and are red any meetings to say you’re right, we should do it. A shoutout to Rachel Cohen. That support is really important not just for meetings but also for people to kind of check you and say hey, did you think about how the animation should do this, have you thought about it from the design perspective, have you thought it about from the dev perspective?

We talked about the whys, let’s talk about the hows. How do we compose animation creating beautiful defaults. Here’s a code penny made to describe how to put these animations into systems. It’s the same small animation but there are a few different things that I can change here. There’s one that has an entrance and one that has an exit and then I have an emphasis and an exit emphasis and I can also adjust the timing. So if we look at the timing, there’s a bunch of different lugs. We have T1, T2, T3, T4, and T5, these are a lot like H1, H2, H3, H4, H5, H5 being your body copy. When people on your site create some paragraphs, they’re not constantly figuring out what font size or font it’s using. It’s already decided. So everybody on your site uses that default H5 or T5, and then from there you can adjust. You can go up and down, that was too small, H4, H3 until you find the right one but then everything stays consistent and they don’t need to rewrite the code in order to use it, they’re just plugging into that class. We can also have some defaults for easing so we can store some variables for easing. This works for both CSS and JavaScript. Here we’re storing these and we apply these to an entrance class. Nobody is going around and hunting for a cubic bezier again. The next developer plugs into the event rants, they plug into T5, they know the adults and they adjust from there. And it’s just what you need, right? It’s what you have decided you need for the site. It’s not inventing a bunch of animations and then asking people to use them. It’s looking over the system and understanding where they’re being used, how they’re being used and applying them then. We’re also going to apply animation film mode both for all of those animations because that will keep the animation from popping back into the first state. So another thing we can do if we have a react kind of code base, and this was a system I worked on that kind of documents and shows pieces of react systems, this company has since pivoted to block chain, of course. So what we can do is we can have all of these defaults that we can express as props for each one of these parameters as well. So just because you’re using the react system doesn’t mean you can’t also create these beautiful defaults that work across systems, especially in things where you’re extending those components. So we can also compose multiple components together so we have all of these components, but the thing that we’re really paying attention to is there’s one wrapper here that actually holds the animation for the buttons coming out. So going in and creating these buttons and adding these labels, and then that component, that floating button component is the one that holds the animation in it. That’s the one that I’m wrapping in order to express the animation. So any time no matter how many details I have coming out, that’s going to be used. But if we have something really particular, maybe it needs its own component, right? So you can create these beautiful defaults used throughout the system and then there are some really particular things, maybe you have a loader that’s got a lot going on in it, those can be encapsulated components as well. So even within these, we have some parameters that we can use. We can change the easing, we can change the timing. And we can make sure that we have all of these things adjustable so that we’re not recreating the wheel. In view we have things called single file components. If you’re not familiar with them, they’re pretty awesome. I’m a very biased person being on the view core team. In the template we have all of our mark-up in the script, we have all of the scripts and for the style we have all the style. You can either say style or style scoped so scoped would be just for that component. What I typically do is I’ll make something like this for a component and it’s very shareable and then inside of this loader I’ll import all of my sass. I’ll import those. These go to any component and anything particular can be shipped within that component. So in a dot view file we have all of that mark-up living together. So if we have something like these sample vue icons, all of these icons are consistent. They hold a consistent view box size and I’m passing in the paths and these animation components, these are SVG components that are all just .vue files that have everything I need in them. They have the SVG as well as the script. Here’s what that would look like. In the script I have some of my animation. That’s attached to the svg itself so even if the mark-up changes, I’m targeting the path ID’s so it kill still say consistent. The designer as long as those paths aren’t changing, then all of this animation stays consistent even if you update the svg icon. This is also on github so you can check out all the code for that as well. If you’re doing responsive animation you have to think about touch and hover and click. So here are some libraries that I like for some gestures that you can use for the web. Zing touch hammer draggable, flickity are all great. If you’re matching them from scratch remember on mouse over or on touch start understanding you need to use both of those in order to create responsive interaction. Another few things to think about for responsive consistency, svg is great for responsive, it’s squishy. I have whole other talks about this. If you don’t know about SVG I won’t go into too much detail here, but they stay crisp on any device, they can be super small and they kind of are malleable for whatever container they’re in. Eases should stay the same but timing could be adjusted. Sometimes things go across the screen. If the screen is yay big that timing needs to be much longer than if the screen is smaller, right? Initial scale, 1.0 in the meta tag. Otherwise it will wait for 300milliseconds. Mobile is waiting for a double tap. So it will wait and it will make it seem like your set is less responsive. Unless you put the initial scale 1.0. You also need a larger touch target. You need something that’s 40pixels by 40 pixels or you can use @media but that’s not fully supported yet. All right. Let’s talk about page transitions. Because a lot of things I showed you before showed you these beautiful page transitions and it’s enough for me to be like make this and walk off the stage, but let’s talk about how you would actually implement something like that. So okay. I’m going to use a tool called Nuxt. It’s like the next JS equivalent. If you use Vue, it gives you server side rendering. If you have a pages directory you drop a vue component and it sets up the routing for you. You don’t have to do anything without stepping out of a vue file. We already have this, that slick loader at the top and all of the routing is set up. Pretty nice. But the other thing it does is it has these hooks for animation. So it already assumes that you might want page animations in transitions in the site. So it allows you to do those for you. So all I have to do to create page animations are to add these classes and add some animation and I’m all set to go with those transitions. But they also allow JavaScript. Don’t ever do this. This is just me messing around. Don’t do this. But it allows us to do all sorts of crazy stuff with these JavaScript hooks. This is what this would look like. I basically plug into this transition inside the script component but the other thing I have here is that mode out in, what that’s going to do is say even if the user clicks to change the page, wait until the outward animation is done and then change the page. And that’s something really special. Usually you would have to put some delay and a lot of craziness. So we can create — I mean lake this fake typography site. You can see how things transition out before they transition in and that’s the thing that’s allowing me to do it. And they’re different per page as well. So I can change all of the animations per page for each one of them. So that’s the repo, that’s also the demo site if you want to check it out. But let’s take it a step further. I showed you native-like page transitions and the web comes under scrutiny because it doesn’t allow us to see native page transitions. That’s something we don’t get to pursue is have things persist. So let’s do that. So recently there was this update where they took all these elements and simplified it. But one thing they did was communicate it by showing all of the elements that were similar going into one place. And that way of expressing things really helps us as humans. We can’t really map individual things to other individual things if it just snaps between things. We can’t remember them. But if we do something like this, we definitely can. We can go oh, I see. They grouped those together and they moved those there. So doing that on our site is really awesome too. So I made this demo where you’re kind of going through and checking out different views of the site so you can see different interactions that we might have, but we can also switch users and I can explore what this person’s use is and kind of go between. But you notice she’s staying consistent on all of the views for the site. And no matter what, I do keep things consistent. So few things are persisting on the page. How do we do that? In our vuex story, you have this storing the page inside of that and I’m also going to make a mutation to change the page. And in middle ware I’m basically allowing it to hold whatever page I’m on. And I register the middleware in my next config. In layouts, there’s a page that goes for all of the components and that allows me to put a navigation component that stays stable on that page. So it’s going to happen for every single page, that one thing. And then I can basically take that idea and say okay, if it’s this page, move this over here or change this to move over here and move them with transforms. The other thing that vue allows us to do is have transition group components. The transition group component does flip under the hood which allows us to say okay, take where this one is at, take where this one is at, and now invert them. And usually those calculations are possible but really complicated and annoying to do. View does that all under the hood for you. I’m going to show you a library that does this natively without vue too. So it’s pretty cool so I just add things to this transition group component and then I’m able to create some transitions and it will make sure that all the elements in there are perfectly hardware accelerated. So then we can get something like this where everything transitions from page to page without a lot of overhead and that’s really exciting. So I made this, and it’s on page transitions but there’s also a github but Simona Cotin works in angular, and Shawn Wang took a fork of it and made it for react. You can check out any one of these demos and see how they were made. But there’s also this really cool thing that came out last week that shows how to animate the CSS — sorry. This is my new clicker that shows us how to animate CSS grid natively, without any kind of frameworks. This github will show you how to animate css grid without using frame works as well. So it’s time for us to give life to our work. The world around us drips and it hobbles and it splashes. Our sites are capable of so much more of being static tables and layouts that don’t move. We can do this and we can make them composable animations that work beautifully across our sites and create beautiful defaults for each one of them. So my question for you today is what are you going to build? Thank you.

applause

Nathan:

Thank you, Sarah. What a tour. I want to start building motion tomorrow, or maybe Thursday. I have to be here tomorrow. So motions beautiful. It’s full of opportunity and it’s still for some, and maybe me as you were showing some of these things, intimidatingly complex. Can you talk a little about how you gradually or what techniques you use to bring someone aboard to build that competency?

Sarah:

Rachel neighbors has a great graph where she shows easy to hard in order to implement and necessary to not very necessary and then you can plot things along those lines and make sure you’re doing the easy necessary things first. I think it’s a really great idea. So starting with something that really changes, shows up in business goals, like the loader and success, like you should have a loader on your site for forms, you should be letting people know that something is successful. So if you can start with something like that, that might actually change numbers, like change the ROI and is not too hard to actually implement, then you can kind of ease your way into the, you might be able to change stakeholders’ ideas that it’s not just fluff, that it is something that actually aids the users’ experience.

Nathan:

I liked your Cleveland pin example, in part I’m from Cleveland. Midwest folks sorry I left you out in the morning. But I’m curious, it connected so many pieces. So many elements transforming into other elements and it seemed like it came back to a rest state at the end. How do you know how many elements to weave together and how do you know when you’ve reached too much.

Sarah:

I think that user testing is always really important and motion will change depending on what your product is. Again, if you’re a financial institution like a bank, probably really small, light touches. I think stripe does a really good job of using animation that kind of shows things and hides things and becomes part of the experience, but it’s never like hi, I’m animation. It’s like the animation is used to kind of display information. So you can put in these small touches before going crazy or wild, especially if you’re something like that. If you’re a site like the Faberge one, you might have more of a chance to do something crazy because you’re a luxury item. Your job may not be to fill out any form on the site. It might just be to make people feel like it’s fancy and expansive. If you’re a movie, you might not even be trying to get anyone to go anywhere except go to the movies on your own. If you’re Life of Pi, crazy animations make sense. But if you’re someplace like Expedia just getting people to their goal more subtlety and charm.

Nathan:

When you were talking about physicality and our observation that we can make into the environments that we occupy, can you connect that a little bit with your statement around how can you connect those paces of motion with a brand’s identity and can you share a store that you’ve gone through in a project in recent years where you’ve’ culled down into specific bits that connect identity to motion.

Sarah:

Can you repeat?

Nathan:

How do you connect the motion with identity and is there a story where you can tell us perhaps you had lots of potential connections?

Sarah:

Yeah definitely. I worked with probably can’t say the name of this client. I worked with this one client for a while and we did a lot of kind of user research, in terms of where, what people thought of the brand and where they were trying to go with the brand. And so there was a lot of research that was kind of strange, like looking at YouTube videos of fire crack willing and things like that, to kind of understand what people might be thinking in terms of what those pictures evoked and what those kinds of things felt lake and how to bring them subtly into something. If you’re talking about something like fire, not necessarily having fire on the site, but having little teaches that might evoke flame or something like that. Yeah. It’s actually kind of more research-based than you might think.

Nathan:

So I have to address this. The whole stop using Google material bit. Caught me by surprise, maybe many of us. So as an alternative, if we’re not to use Google and we don’t have Sarah on our team and we don’t have a motion competency in house, should we do nothing? Or should we choose Google and bridge to something else?

Sarah:

Yeah, yeah. That’s a totally valid way of going about things. I just want people to understand that that’s a choice towards using any choice for motions also a choice towards your brand. So using Google material design, because that’s a strong decision for motion, is a great place to start, especially if you are trying to understand how things work and you need a few guidelines and you don’t know how to implement things. But I would encourage you to eventually start to move away, start to make some decisions in another direction, so that you can kind of — maybe it’s as simple as instead of it doing this one thing, we have it do this other thing right at the end. And you can kind of build off of that over time. But if you use Google material design, just keep it in the back of your mind that that’s a thing that you’re deciding to do. It would be the same as if you decided to use Google colors or any other brand’s colors. It’s a decision that you’re making to lean on someone else’s brand rather than your own.

Nathan:

Your talk was called composing animation and it places motion in a context. And as we discover what the motions that fits our identity, how do you decide how many contexts do we need to create, how many references to we need to explore to feel confident that it’s captured what we want? Is there a magic number to this, and does it bridge from contrived to feeling like it’s a real expression of our own experience?

Sarah:

Yeah I think it’s the same as you would find for a lot of the other things. Like some sites, like in this room, probably there are some sites where people were handed a bunch of colors and they had to make a design system with those colors. There’s probably other people in this room who started off with a certain color and did a lot of exploration towards colors and typography and the way that those things are evoked. So it’s not really a one-size -fits-all things. There are different budgets too. Some people can sit and afford to think about those things and they have research people on staff. Other people, it’s like mayhem and they’ve got aggressive product deadlines and they’re trying to get things in. So it would really change based on what people have on staff, how much money they have to what kind of resources. So I would say starting if your budget is small for these kinds of things, making some small defaults is a really nice way of making sure that they’re composed. But careful defaults too, right? Like asking what is going to happen on the site. Does the menu open? Does a modal open? These are all opportunities for small bits of motion that don’t have to be totally extravagant.

Nathan:

So to close, where do you see motion sitting as a potential peer to color and other typographies, can you project out five years from now, ten years from now, where would you want us all to be with motion?

Sarah:

I guess in five or ten years, I don’t know if any of you have seen Jen Simmons’ talks, she shows a picture of a sidebar and a header and a body and she says we’re stuck in this rut. We need to break out of this rut because we’re not making table-based layouts anymore. I feel the same way about motion. I feel like we’re still stuck in this rut where things aren’t possible that are. And so I think in five or ten years I would love it if not everything is moving on the web or anything like that, but just small bits of motion that help our brands come to life. So seeing, I mentioned Mailchimp before, I don’t work with Mailchimp but their colors are lively. Their whole brand gives me the sense that they’re very friendly. So having motion that complements that and feels like a friendly type of joyful bounce or something is a good way of bringing motion to a brand that is friendly much so considering where you’re at and what your typography and color and those things convey, and then extending that a bit with motion.

Nathan:

Thank you so much, Sarah. Round of applause for Sarah.

applause