Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Using Motion For User Experience On Apps And Websites

Digital experiences are emulating real life more and more every day. This may seem counterintuitive, considering the hate that rains down on skeuomorphic visual design, but there’s a lot more to emulating real life than aesthetics. Interface designers can emulate real-life physics and movement on a digital screen. This type of motion is becoming more common, which is why it’s becoming easier for people to understand computers. We’re not getting better, the interfaces are!

A quick and common example is how iOS opens and closes apps. The transitions are very subtle, but they’re realistic. Tapping an app icon doesn’t just snap a new app on to the screen. Instead, users see the app physically grow out of the icon. In reverse, pressing the home key shrinks the app back into the icon.

Those interactions are based on properties of the real world. The app appears to come from somewhere physical and disappear back to that place. The high quality and realistic transitions here go a long way toward helping the user understand what’s happening and why.


Opening an iOS app without a transition vs. with the transition.

In this article, I’ll cover a little bit of the history of motion on the web, why that’s important, and what the future of motion on the web will look like. (Hint: motion is really important for usability, and it’s changing everything.) Then I’ll explain the CSS behind motion and how to use motion well.

The History Of Motion On The Web Link

It was only 2011 when all major browsers officially recognized CSS animation, and even now it requires browser prefixes to work everywhere. In large part, the push for CSS-driven animation was sparked by the death of Flash, where “movement was common” is an understatement.

In the days of Flash, some websites were basically movies. There was a lot of movement and animation, but most of it was unnecessary to navigate and absorb the content. It was for wow effect at best.

Flash was eventually forced out of the picture, but designers and developers were left without any really good tools for movement and animation on the web.

JavaScript and jQuery became really popular, and they were huge leaps forward, but there are all kinds of reasons not to rely on JavaScript for your site to function. Plus, JavaScript animation was, and in some ways still is, taxing for browsers. Some motion was possible, but it needed to be used sparingly.

It wasn’t long before the CSS3 animation and transitions specs were accepted and implemented by modern browsers.

Designers now have the ability to take advantage of hardware acceleration and can control movement with their style sheets, further separating content and visual markup. In addition, today’s average computers are more than capable of rendering complex animations, and even phones are powerful enough to process an impressive amount of movement.

The Future Of Motion On The Web Link

The combination of capable machines and evolving CSS specs means things are going to change in interface design. Websites and apps are going to start taking advantage of motion and what it can do for usability. It’s already happening in a lot of ways, but here are some examples to look out for.

Layers Link

Layers are everywhere in modern web and app interfaces. Apple really pushed the concept of layers with iOS7. An example is the Control Center, which slides up from the bottom as a new layer that partially covers whatever’s on the screen.


The iOS Control Center slides in over the current screen as a new layer.

Although layers aren’t movement in themselves, they go hand in hand because they work best when they animate in and animate out.

Layers are important because designers can keep information hidden on another layer until it’s called on, instead of refreshing the entire page to display large amounts of new information. This allows users to think less and understand more. It gives them context, which is the next thing you’ll start to see a lot of with motion.

Context Link

Context is a broad term. For this discussion, I use it to refer to elements and pages that don’t just snap from one state to another without showing where they came from and why. Context helps us remove the digital mystery and therefore it helps users’ brains focus less on interpreting the interface and more on the content and their goals.

To illustrate how transitions can convey context, take a look at the Instacart iOS app. Tapping on an item to see more detail about it doesn’t just snap open a new view with the item details.

While that would likely be understood by most users, take a look at the GIF below to see what happens instead. We see the item’s picture move from its current position to a new position above the details view. We completely understand what happened and how it relates to the previous view. In fact, this doesn’t even feel like we’re switching from one view to another. This seems much more natural than that.


The transition into the detail view in the Instacart app helps to give the user context.

The effect is subtle, but it has huge usability implications. Another example is the newly popular drawer menu, where clicking a hamburger icon reveals a full menu.

If the user taps the icon and their entire screen is instantly replaced by the menu, they have no context as to where that menu came from and why. It won’t completely derail anyone, but it’s not a good user experience.

All it needs is to slide in from the left and suddenly the user has context for what’s happening: “Oh, the menu was just sitting offscreen, waiting to be called.”

You can see a drawer menu example in almost every popular app these days and on most mobile versions of websites. The GMail and Facebook apps are both excellent examples of this concept.

The Single Page Application Link

The next trend we’ll see are single page applications (SPAs). As we add motion and transitions to parts of our user interfaces, we’ll start to want more control of the interface as a whole (not the interface within each page). Websites can now handle all kinds of transitions from state to state within a page, but what about the transition from page to page? Any small gap when the screen goes white or shifts content around hurts usability.

That explains the rising popularity of the single page application. Right now, there are a lot of popular frameworks to build SPAs, and they’re more like native mobile applications than webpages (at least in some ways).

The sign-in and sign-up process for Dance It Yourself (an SPA I’m currently building) illustrates this well. If you go to http://app.danceityourself.com1, you’ll see the page initially loads like a normal website, but if you tap the Sign Up button, instead of refreshing the page, the content either slides up from the bottom (on smaller screens) or in from the left (larger screens). The technique uses JavaScript to add a class to the Sign Up page, which triggers a CSS transition.

The result is a smooth, fast and logical transition from one screen to another. Once you sign in to the app, the entire experience is treated the same way. All the movement and transitions are driven by logic and context, and they make this web application feel more like a native application than a website.

How To Do CSS Motion Link

Single page applications present a good opportunity to take advantage of CSS motion, but there are plenty of other places to use it, including potentially every element on every website you make from now on. But how do we actually do it? What does the CSS look like?

To understand the basics of CSS motion, it’s important to start simple. What follows are explanations with examples, but they’re definitely minimum viable examples. Follow some of the links to learn much more about the in-depth aspects of each type of CSS motion.

CSS Transitions Link

There are many times when a little transition can go a long way. Instead of changing properties of an element in a split second, a transition gives the user some real context and a visual clue as to what’s happening and why.

This helps usability because it removes the mystery behind digital state change. In real life, based on physics, there is always a transition from any one thing to another. The human brain understands this, so it’s important to translate that visual information into our interfaces.

To start explaining CSS transitions, let’s first look at a state change without any transition.

button {
   margin-left:0;
}

button:hover {
   margin-left:10px;
}

When the user hovers over the button, it jumps 10 pixels to the right. Check out the demo to see it in action2.

Now let’s add the most basic form of a transition. I’ve left out browser prefixes, but they’re in the demos, because we still need to use them in production code.

button {
   margin-left:0;
   transition: margin-left 1s;
}

button:hover {
   margin-left:10px;
}

That code will animate the margin-left CSS property when a user hovers over the button. It will animate from 0 to 10px in 1 second.

Here’s a demo for that3. Notice how unnatural it looks, though.

Next, we’ll make the motion look a little more realistic with just a small adjustment.

button {
   margin-left:0;
   transition: margin-left .25s ease-out;
}

button:hover {
   margin-left:10px;
}

Here’s that demo4. This example looks nice and natural. There’s probably little reason to animate the margin-left property of a button. You can imagine how this can apply to many different circumstances.

The last important thing to know about CSS transitions (and CSS animation for that matter), is that we can’t animate every CSS property. As time goes on, we’ll be able to animate more and more, but for now, we need to stick to a select few. Here’s a list of all the properties that will animate using the CSS transition property5.

When we talk about the hover state, it’s easy to see how CSS transitions apply, but also consider triggering transitions by adding an additional class to an element. This trick will come in handy. How the class gets added has to do with your implementation, but any time a class is added or removed, it will trigger the CSS transition.

button {
   margin-left:0;
   transition: margin-left .25s ease-out;
}

button.moveRight {
   margin-left:10px;
}

CSS Animations Link

The basic CSS for an animation is a little more complicated, but it’s similar to CSS transitions in a lot of ways.

The reasons to use CSS animations are also similar to transitions, but there are some different applications. We want to emulate real life as much as possible so that human brains can do less work to understand what’s going on. Unlike transitions, however, animations can be looped and can move independently of user input. Therefore, we can use animation to draw attention to elements on a page. Or we can add subtle movement to illustrations or background elements to give our interfaces some life.

Animation benefits may seem less tangible, but they’re equally as important. It pays to add some fun to our interfaces. Users should love to use our products, and animation can have a big impact on the overall user experience.

Here’s a shorthand example of a CSS animation. We use a block of CSS keyframes and give it a name, and we assign that keyframe animation to an element. Again, since browser prefixes add a lot of code, I didn’t include them. I did, however, include them in the demo, because, unfortunately, we still need to include all browser prefixes in the real world.

div.circle {
   background:#000;
   border-radius:50%;
   animation:circleGrow 800ms ease-in-out infinite alternate both;
}

@keyframes circleGrow {
   0% {
      height:2px;
      width:2px;
   }
   50% {
      height:40px;
      width:40px;
   }
   100% {
      height:34px;
      width:34px;
   }
}

Here’s the animation demo6.

To break it down, there are really only two things going on here.

First, there’s the animation property itself. It’s very much like the transition property, but it has a lot more that we can control. I used the shorthand version in my example, but just like the transition property, each part can be controlled as a separate CSS property (you probably do this with background all the time).

The shorthand animation property breaks down like this:

animation: [animation name (from keyframe block)] [duration] [timing function] [delay] [number of times the animation repeats] [animation direction] [fill mode]

Here’s a more thorough explanation of all the different CSS animation properties7.

The second thing going on is the keyframes block. At a very basic level, this is self explanatory. Set any number of percentages from 0–100 to represent how far through the animation we are from start (0%) to finish (100%). Then add any styles for that stage of the animation. When the animation runs, all styles will animate between the values you specify at each percentage number.

Again, not all properties animate, but as times goes on, we’ll be able to do more and more.

How To Do CSS Motion Well Link

Now that you know how to write the CSS for motion, it’s time to think about using motion well. All of the concepts here will fail if executed improperly. Transition and animation need to feel real. If they don’t, they’ll be surprisingly distracting, and the distraction will actually hurt usability.

The trick to making motion look natural is two-fold: easing and object weight.

Easing Link

You may have noticed the easing part in the code examples. In real life, objects start moving gradually and slow to a stop. Things don’t just start moving at 100% speed. That’s where the third property for the transition style comes in from the examples: ease-out or ease-in. Sometimes, your best bet is actually ease-in-out (here’s a list of all the possible easing (timing) functions8).

Weight Link

Weight, on the other hand, is not a specific property of the transition or animation style. Weight mainly affects motion speed, and the basic concept is that smaller objects would have less physical weight in real life, so they’d move faster than larger objects. That’s why we increased the transition speed on the button from the second to the third example above. A small button seems really slow when it takes 1 second to move 10 pixels. A quarter of a second seems much more natural. (You can also use milliseconds, as in the example below.)

transition: margin-left 250ms ease-out;

A Tip If You’re Just Getting Started Link

This all may seem like a lot. If you’re new to CSS transitions and animation, I’d recommend one important thing. Build in steps. If you write an entire, complex keyframes block in one shot and then add timing, easing and looping into the animation property, you’ll find out very quickly that you’re confused. It will be hard to tweak and edit that animation. Start simple, and build the animation up by testing and iterating.

Coming Full Circle Link

When you’re up and running and using CSS motion, you’ll start to notice all kinds of different uses for these techniques. In most cases, it’s much more than a bell and whistle or a superfluous add-on. Movement is a tool, and it conveys context, meaning, importance and more. It can be just as important as any other usability technique that we use today.

As interface designers take advantage of motion, and as interfaces start to behave more like objects and environments in the real world, usability and user experience will improve as well. Humans will have to think less about computer interfaces and therefore the interfaces will be easier to learn and easier to use. Users may feel like they’re getting smarter or more tech savvy, but really, the interfaces are just conforming more to the ideas and concepts they’re already familiar with in real life.

So take advantage of CSS motion as a usability tool. Help your users by giving them realism and context. The world on the small screen doesn’t have to be so different from the real world around us, and the more similar it is, the easier it is for users to understand it.

(da, ml, og, il)

Footnotes Link

  1. 1 http://app.danceityourself.com
  2. 2 http://codepen.io/drewbrolik/pen/opskq
  3. 3 http://codepen.io/drewbrolik/pen/ivzfK
  4. 4 http://codepen.io/drewbrolik/pen/LFijf
  5. 5 http://css3.bradshawenterprises.com/transitions/#animatable
  6. 6 http://codepen.io/drewbrolik/pen/mJgqb
  7. 7 http://www.css3files.com/animation/
  8. 8 http://css3.bradshawenterprises.com/transitions/#differentTiming
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Drew Thomas is the CTO and co-founder of Brolik. He oversees Brolik’s technology projects, including Leverage, Brolik’s proprietary technology platform. Drew spends most of his free time on side projects and prefers to blend work and life into a balanced, enjoyable experience. He lives in Austin, TX.

  1. 1

    Eric Mikkelsen

    January 19, 2015 3:28 pm

    Hey Drew, I’m surprised you picked a style that forces repaints on the screen which are expensive instead of transforms which have a higher refresh rate. If you used transform:translate3d(10px,0,0); it’d not only be faster but it’s also just the right way to approach motion on the web.

    8
    • 2

      I kind of agree with Eric, using a scale transform instead of a width/height animation would be more performant. Plus you can’t animate to “auto” value of with and heigh so it’s kind of clumpsy.
      May I add that I would avoid animations margins and use transform instead ? When you animate margin, it will affect the whole page. In the demo it’s not an issue since there are no other elements, but for instance if you want to move the button 2px to the bottom, animating margin-top would result in the whole rest of the page moving as well. Unless of course this is the intended effect :)
      There’s a really nice article on the topic of animation perfomance that will explain this way better than me: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/?redirect_from_locale=fr

      6
    • 3

      I applaud the simple way the article is written. If the reader is not familiar with ‘animations’ and ‘transitions’ it is almost a safe bet he doesn’t know ‘transform’ either :) Good call!

      2
    • 4

      Hey Eric and Stéphanie,

      Thanks for pointing all of this out. I didn’t originally intend to talk about when to use transform and when not to, and similarly, I only intended the examples to be a very basic way to illustrate my point. You are both correct, though, that there are other ways to do motion that are less “expensive.”

      To Martin’s point, I think that understanding the basics of transitions and animations are a great way to introduce the “higher level” topics like context and physics, and as an overview, transform may have complicated that message. However, that’s a great topic for a followup article!

      Thanks for the insight, and I encourage readers to research transforms, especially if performance is a big focus of the project.

      3
    • 5

      Daniel Schwarz

      January 20, 2015 8:11 pm

      When I first built Airwalk Design http://airwalk-design.com I used transit.js to handle motion, with the intention of removing it later (less http requests). Performance wasn’t as expected as I didn’t know about translate3d at the time, but it still didn’t solve the entire issue. Removing box-shadows and using will-change helped a lot! :)

      0
  2. 6

    I believe Material Design is a great step towards the right direction as well. Its “meaningful transitions” guideline already provided awesome examples of motion that enhances both user experience and feedback about what and how things are happening on the screen.

    Here are the guidelines:
    http://www.google.com/design/spec/animation/meaningful-transitions.html#

    And here are some practical examples as seen in Google Newsstand app:
    http://gfycat.com/BronzeWhirlwindBluetickcoonhound
    http://gfycat.com/FineRevolvingEland
    http://gfycat.com/HollowJoyfulFrillneckedlizard

    7
  3. 7

    After reading your article, I have learned something. First, I have never considered the movement when we are using APP and website. You have the great sight to analyze about the digital experiences. Interface designers can emulate real-life physics and movement on a digital screen. They let motions on screen much easier and common for people who are experiencing it. You gave us the great example for explaining how the transitions work. Those interactions are based on properties of real life. Second thing that I have learned is the future of motion on the website. There are three major categories you write about it. They are layers, context and the single page application. Layers are important because designer can keep information hidden on another layer until it’s called on, instead of refreshing the entire page to display large amounts of new information. Context helps users’ brains focus less on interpreting the interface and more on the content and their goals. Working the single page application that is a smooth, fast and logical transition from one screen to another. I think these ways of motion are great example to understand how the future of motion will develop. Thank you for sharing your article.

    1
  4. 8

    Thanks for sharing the article. It was great going through it and have learnt many new things.

    -4
  5. 9

    @chrisvanraay

    January 20, 2015 8:21 am

    I don’t agree that in Flash most animation was “…for wow effect at best.” I would think a large number of todays great interaction designers used to design great interfaces in Flash back then. It was after all, the only way of doing great interaction at the time.

    Many of today’s best practice interaction design features (like the z-index shadows in Material Design) were mainstream in Flash.

    2
    • 10

      Well said Chris, it’s a bit like the articles on here that think UI/UX didn’t exist before the web.
      Great article thanks Drew.

      0
  6. 11

    Digital Freelancerz

    January 21, 2015 1:21 pm

    thanks for sharing such an interesting article…. feeling awesome after reading it-digitalfreelancerz.com

    -5
  7. 12

    Using the CSS motion is the face of new technology. Movement within technology is making everything more user friendly. For example the new pull up feature on the new iOS8 update. Having everything that we commonly use just swipe away. Making it convenient to anyone and everyone. It makes us feel like we understand the technology but in reality the technology is becoming easier to use. It makes everything we need at the touch of a button or a simple slide of a finger. One cool feature is this new laying feature. When you swipe up on the iPhone The background becomes almost fogged so that the focus of the user is on the layer that was selected instead of the background. The CSS motion is really helpful when it comes to making things easier to use.

    1
  8. 13

    Craig Rozynski

    January 28, 2015 2:22 am

    “Protip: for smoother transitions the set transition-duration of a css property should divide by the amount that the property will change by.” from @kindofone on Twitter.

    1
  9. 14

    A good article all around, but in hindsight, I am wondering why you didn’t use a title like “see what apple does and do it”… the examples you chose to illustrate points are indeed good picks, but overall, I see much more coherence in google’s description and implementation of material design concept…
    still good pointers and ideas, despite the bias towards ios ;)

    0
  10. 15

    Fernando Castillo

    February 16, 2015 11:23 am

    Motion and user experience are the two main parameters to forcast the approximate value of ROI.

    -2
  11. 16

    nice article. the importance of transitions are often overlooked. good transitions improve UX ten-fold

    1
  12. 17

    “Those interactions (transitions) are based on properties of the real world.”
    That seems a spurious argument for a virtual world.

    Personally I want menus, links and panels to snap – without any sliding, expanding or other transitions – and I would love to know how to disable transitions. Any help please?

    I don’t “hate” skeumorphism. I much prefer the realism that was developing from games as graphics enhanced.
    I hate more the dumbed down, minimalist, Fisher Price First Computer of redesigned sites – flat, monotone, lacking visual navigation clues, with huge photos, over-large text, glaring empty white space causing unnecessary scrolling.

    But that does not mean I want the equivalent of reaching for a (visually small) tool on a distant shelf and bringing it towards me.
    In the ideal world that tool would materialise in my hand as required !

    1

↑ Back to top