Designing Interface Animation

Meaningful Motion for User Experience

By Val Head

  • Designing Interface Animation Cover
  • Effective interface animation deftly combines form and function to improve feedback, aid in orientation, direct attention, show causality, and express your brand’s personality. Designing Interface Animation shows you how to create web animation that balances purpose and style while blending seamlessly into the user’s experience. This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike.

    Val Head shows us how to create animation that reduces the cognitive load on our users—animation that is not just on the web but of the web—and does it in a style that’s as entertaining as animation itself.

    Jeffrey Zeldman, author, Designing with Web Standards

    Illustrations View all on Flickr

    • DIA000a: Front Cover
    • DIA000b: Back Cover
    • DIA001: Figure 1.1
    • DIA002: Figure 1.2
    • DIA003: Figure 2.1
    • DIA004: Figure 2.2
    • DIA005: Figure 2.3
    • DIA006: Figure 2.4

    Designing Interface Animation Blog View all Blog posts

    Table of Contents

    Part I: The Case for Animation

    Chapter 1: Why You Can’t Ignore Animation
    Chapter 2: You Already Know More About Animation Than You Think
    Chapter 3: Modern Principles of Interactive Animation

    Part II: Using Animation to Solve Design Problems

    Chapter 4: Using Animation to Orient and Give Context
    Chapter 5: Using Animation to Direct Focus and Attention
    Chapter 6: Using Animation to Show Cause and Effect
    Chapter 7: Using Animation for Feedback
    Chapter 8: Using Animation to Demonstrate
    Chapter 9:Using Animation to Express Your Brand

    Part III: Animation in Your Work and Process

    Chapter 10: Where Animation Fits in Your Design Process
    Chapter 11: Prototyping Your Animation Ideas
    Chapter 12: Animating Responsibly


    These common questions and their short answers are taken from Val Head’s book Designing Interface Animation: Meaningful Motion for User Experience. You can find longer answers to each in your copy of the book, either printed or digital version.

    1. Is this book only about web animation?
      I’m framing the majority of my discussion of animation around the web because that’s my preferred medium; however, all of the theory and design approaches to using animation effectively apply to other platforms as well. Even if the technology of web animation isn’t what you’ll be working with, there are still many benefits you can gain from including animation in your design efforts.
    2. Why talk about animation now?
      The technology available on the web means that it’s now possible to create effective animation using the same technologies that you’ve been using to build websites all along. At the same time, much of the audience’s expectations have changed in recent years, due to the popularity of smartphones, touch screens, and similar devices. The combination of these two recent trends means that you should consider the potential design benefits of animation more closely. See page 4 for more information.
    3. How can animation improve the user experience? How does it become more than just decoration or distraction?
      Animation can improve feedback, aid in orientation, direct attention, show causality, and express your brand’s personality. Great interface animation combines a known purpose and expert animation style to blend seamlessly into the rest of the design and enhance the experience. Identifying strong foundations of purpose for animation are covered in Chapters 4 through 9.
    4. How do I convince my boss/client/team that
      animation is something we should use?

      Getting your teammates or colleagues to view animation as a useful design tool takes time and won’t happen overnight, but it can be done. The way to do this is to be an internal champion of animation and what it can add to your design efforts at every opportunity. The more examples you can show to demonstrate what animation can offer design, the easier it will be for your colleagues to see the potential benefits of animation. See page 164 for more advice on how to be an undercover animation hero.
    5. How can I express my brand in motion?
      Knowing your brand’s personality and how it expresses itself in motion is key to creating a unique experience across many platforms and mediums. The same voice and tone your brand expresses with things like copy, content, type, and color can be expressed in animation terms as well. Depending on whether you are working with an established brand or a brand new venture, you may want to start with a motion audit—cataloging the animation that you already have—or by translating your brand’s current personality traits to animation directly. See Chapter 9 for more details on each approach and other tips for expressing your brand in motion.
    6. Do Disney’s classic principles of animation still apply to animating interfaces?
      They absolutely do! While interface animation works in a different medium than these classic principles were originally written for, the concepts covered in the classic principles show you how to create animation that references the real world and communicates effectively—both of which are useful for designing effective interface animations. Much like you might reference the general guidelines of typography before delving into a layout with type, the classic principles can help guide your animation decisions. For more on the classic principles and how they apply to interface work, see Chapter 2.
    7. How does animation affect the accessibility of an interface?
      Animation can have both positive and negative effects on accessibility. It can help to make interfaces easier to understand by reducing cognitive load and making feedback or state changes easier to follow and understand. But it can also negatively affect people with vestibular disorders and similar conditions. For more on the potential impacts of animation on accessibility and how to animate responsibly, see Chapter 12.


    Chapter 1 (PDF)


    Marc Davis, one of the original animators at Walt Disney Studios, once said that before the studio was formed, “Animation had been done before, but stories were never told.”

    I love that line. Not the least because it was some powerful shade being thrown at Disney’s competitors, but because it was, in another sense, very true. At the time Disney founded his studio, animation was in a state of transition: it was evolving from an expensive, somewhat primitive and novel medium, into a proper, respected, moving art form.

    As you read these words, the web is undergoing a similar transition. And you’ve just opened a book that will guide you through it.

    Early web animation was dominated by bold, evocative, and flashy work. But while there was wonderful work produced in the web’s first days, practical web animation was a little harder to find. It’s only in the last few years that web designers have come to appreciate what thoughtful, well-executed animation can do for them. When done right, a little motion can warm up an interface to introduce a little playfulness to otherwise rote transactions. Animation can help us communicate more effectively with our audiences and make them feel more at home with our products, services, and designs.

    This is the book Val Head has written for you: a foundational text for animation on the web. While practical tips abound throughout the book, she’s not just concerned with implementation. Not only will you learn how to build these designs, but why certain techniques are more effective than others. In these pages, you’ll learn from Val’s vast library of interface examples and begin to develop your own animation vocabulary.

    After all, animation on the web has been here for years. Now, it’s time to tell stories—and Val’s about to show you how.

    —Ethan Marcotte, author of Responsive Web Design


    Val Head shows us how to create animation that reduces the cognitive load on our users—animation that is not just on the web but of the web—and does it in a style that’s as entertaining as animation itself.

    Jeffrey Zeldman, author, Designing with Web Standards

    Understanding animation is now crucial for designers and developers. This book will help you quickly get up to speed, and Val is the perfect person to have written it!

    Dan Mall, founder and director, SuperFriendly

    This is by far the most comprehensive book on UI animations. Highly recommend to any web designer or developer at any level. The book is great for both professionals and newbies looking to take their animation skills to a new level.

    Petr Tichy, front-end developer,

    Animation on the web is here. Interfaces without any animation are starting to feel drab. More importantly, well-done animations help an interface communicate. Don’t take it from me, let Val Head show you. This book teaches you why this stuff matters through compelling examples, and it helps you find a workflow for your own projects.

    Chris Coyier, co-founder, CodePen

    Very few people can explain the power of animation like Val Head can. This book doesn’t just cover the theory of animation—it also breaks down actionable details for how to solve common use cases, all with clarity and levity. Designing Interface Animation is a powerful resource for designers and developers alike!

    Sarah Drasner, manager, UX Design and Engineering, Trulia