Only one area of development truly thrilled me: interaction. Canvas, SVG, the web audio API, webGL—CSS3 animations were just the beginning of my fascination. I started to see the browser as something more than a document reader, the internet as more than a series of linked documents.
We use HTML to tell stories and communicate vast amounts of information—and animation helps us do both better. Just as hierarchy guides users through content, animation guides them through interactions by helping them understand relationships, structure, cause, and effect. Animation shouldn’t be a nice-to-have. It is critical to communication. Another layer of information
Animation is powerful because it can create the “illusion of life.” This means taking into account physical things like gravity, reaction, squash, stretch, and timing. There’s a reason Disney’s animated masterpieces look and “feel” better than their cheap knock-off counterparts. Reality is rich with sensual input that informs our brains about where we are and the things around us. Translating even a fraction of that information into a two-dimensional medium can help users infer more information about what they’re looking at and how it relates to the information system it inhabits.
With the rise of flat design and the UX stumbles that have come with it, we’ve seen just how dangerous it can be to strip visual cues from a site’s components. Animation can be used to the opposite effect. With proper application, animation can indicate: Causality:
When one thing happens just before another, our brains infer that the two things are related and that the first caused the second. For instance, when you click a submit button and the form disappears, you infer that you’ve caused the form to react, not that it was on a timer that coincidentally was set to disappear at the same time you clicked button.