The Web In Motion: Practical Considerations For Designing With Animation

The Web In Motion: Practical Considerations For Designing With Animation

Animation is not about mere decoration, but (when used sparingly) can turn out to be a catalyst for making the interaction with a website more intuitive and memorable. So, what is the current state of animation on the web? Where is it heading? And how can you tackle the possibilities and challenges it brings along?


After the golden times of Flash were over, animations led a rather shadowy existence on the web for quite some time. They were considered as unnecessary gimmicks and superfluous add-ons, but things were about to change. With apps already benefiting from their responsive interfaces, the importance of both animation and motion design, as well as their ability to make the user experience more delightful, was growing evermore. The questions tackled and discussed in this eBook are bound to help you grasp what meaningful motion design is all about and how you can implement it into your own projects.


  • The State Of Animation
    by Rachel Nabors
  • A Quick Look Into The Math Of Animations With JavaScript
    by Christian Heilmann
  • Animating Without jQuery
    by Julian Shapiro
  • Faster UI Animations With Velocity.js
    by Julian Shapiro
  • Using Motion For User Experience On Apps And Websites
    by Drew Thomas
  • Understanding CSS Timing Functions
    by Stephen Greig
  • Styling And Animating SVGs With CSS
    by Sara Soueidan

Technical Information

  • Formats: PDF, EPUB, Kindle (DRM-free)
  • Pages: 162
  • Language: English
  • Released: February 2015
  • Publisher: Smashing Magazine GmbH
  • ISBN (PDF): 978-3-945749-11-1
  • ISBN (EPUB): 978-3-945749-09-8
  • ISBN (KINDLE): 978-3-945749-10-4

Excerpt From Chapter 1

The State Of Animation 2014 — by Rachel Nabors

The post-Flash era is hardly free of animation. CSS animation is quickly becoming a cornerstone of user-friendly interfaces on mobile and desktop, and JavaScript libraries already exist to handle complex interactive animations. In the wake of so much “CSS versus JavaScript animation” infighting, a new API specifically for web animation is coming out that might just unite both camps.

It’s an exciting time for web animation, and also a time of grave miscommunication and misinformation. In 2014, I had the chance to travel the world to talk about using animation in user interfaces and design. I met and interviewed dozens of people who use and champion both CSS and JavaScript. After interviewing so many developers, designers and browser representatives, I discovered a technical and human story to be told.

Excerpt From Chapter 4

Faster UI Animations With Velocity.js — by Julian Shapiro

From a motion design perspective, is phe- nomenally static. It’s purposefully dumbed down for the broadest levels of compatibility and user comfort. Face- book’s iOS apps, on the other hand, are fluid. They priori- tize the design of motion; they feel like living, breathing apps.

This article serves to demonstrate that this dichotomy does not need to exist; websites can benefit from the same level of interactive and performant motion design found on mobile apps.

Related Products

↑ Back to top