What do you think?
Rate this book
A Book Apart Briefs #6
Animation at Work
Animation isn’t merely decorative—it’s an invaluable tool for creating a better web. Start with science: by understanding the human visual processing system, you can design delightful animation that works to ease cognitive load. Rachel Nabors guides you through the anatomy of web animations, patterns, and communication decisions across teams. This book will prepare you to identify and prioritize opportunities to integrate animation into design systems for building better experiences.
75 pages, ebook
Published August 22, 2017
4 people are currently reading
157 people want to read
Ratings & Reviews
Friends & Following
Create a free account to discover what your friends think of this book!
Community Reviews
Displaying 1 - 13 of 13 reviews
September 23, 2017
Whether you're a developer, a designer, or any other role on a UI development team, this book is for you. Rachel lays out the foundations of animation including the importance of getting it right as well as ways to communicate specs and justify spending time on animations. Plus, science! Truly, this is a really great read for anyone working on user interfaces (including mobile IMO!).
September 30, 2017
A must-read for anyone even remotely interested in (web) animation.
September 9, 2018
Review
One of the best books I've read, a structured, extensive and elaborate explanation of why web animations are important, how to get buy-in and easily include them in your development process.
There isn't a single trace of programming code here, what you'll find is a breakdown of the different types of animation, how to test their impact, the effects on the user cognitive flow, how cartoonists influenced UI design and web animation, how to keep pragmatic, design for accessibility and how to combine knowledge of the human vision, perception and reaction time to create animations that add context and delight.
Notes
Intro
- We use "web app" to refer to sites that are more than just plain HTML.
* For sites that look, feel, serve and perform as well as an app, animation is an essential tool.
- Animation is not just something decorative to be included at the end of the project if there's some budget left over.
* It creates experiences that go beyond mere linked documents.
* Immerses users in the illusion of life.
* Generates user confidence and trust with as much strength as a professional logo.
Human Perception and Animation
- Human vision:
* The "where system": detects motion.
* The "what system": detects form (morph) and colour.
- Avoid cut-based animation, which works on cinematography but not on the web.
* Animation should add context to seemingly disconnected elements and events.
^ And offload this context to the visual cortex, reducing cognitive load, increasing perceived speed.
- Animation makes elements relationships clear, so users don't spend time thinking what just happened but thinking what to do next.
- Tweens: in-between animation states.
* Cuts in the UI make the brain do the in-betweening.
- Sudden changes could distract users from the task at hand.
- Cone of vision: human eye is more sensitive to colour changes in the centre (things users are directly looking at), and to movement in the edges.
* Edges pick up almost no colour changes and just trigger an eye move signal.
- Change blindness: when you don't notice a change when looking at a familiar thing or returning to a familiar room.
Patterns and Purpose
- 5 types of animation:
* Transitions
* Supplements: bring stuff on or off the page without changing location or user's task.
* Feedback
* Demonstrations: show, don't tell, can explain stuff to users, rather than having them read through a manual.
* Decorative: purely aesthetics, do not convey new information, separate ordinary from extraordinary.
- Don't fall in the trap of only implementing delighters that just reinforce branding and don't improve cognitive flow.
- Wordy descriptions can indicate something being told, demonstration could be better.
Anatomy of a Web Animation
- Easing:
* Acceleration: good for system initiated animation, to not startle users.
* Deceleration: good for user initiated, makes UI feel responsive and snappy.
* Speeding up - slowing down: interaction models, when moving an element toward another.
* Linear: good for fades or colour change.
* Bouncing.
- Humans take 200-300ms to react to visual changes like clicking on a just enabled button.
- It takes 70-700ms for the human eye to move.
* Shorter animations near the centre of the cone of vision are better, 70-200ms.
^ While longer toward the edges, 300-700ms.
- Changing colour on hover might be too slow over 100ms and moving something across the page below 300ms might be too fast, test to see what feels right.
- When working on an animation for long, it may feel faster than it really is.
- Tokenise animation durations and timing functions in style-guides in order to standardise animations across the site.
Communicating Animation
- Storyboards can help quantify element animations, by describing what, how and why things animate.
- Animatics: videos of storyboards with audio tracks of actors reading their lines and the soundtracks.
* Try Adobe After Effects or PrincipleForMac.
- Try Framer for UI prototyping.
- Generate buy-in:
* Add animations to the style-guide.
* Show side-by-side prototypes to stakeholders showing the site with and without them.
Best Practices and other Educated Guesses
- The fact that people notice and praise your animations, might be a red flag, they're spending cognitive power on them, the opposite of what you want.
* You want animation to provide context, and only be noticed when you want to attract users attention, like demonstrative animation.
- Keep consistency, if an element entrance is animated, the exit should be as well.
- Avoid FOULS: flashes of unloaded/ing states.
* Use Facebook Shimmer or spinners in place of loading images.
- Adding motion blur (smear of motion) can help fast movements register better at low frame rates, makes the retina see smoother motion.
* Try fading the object in the middle of its trajectory and back again at the end to give the impression that it moved so fast as to not register.
- The Web Animations API would help you provide users with a way of speed up or slow down site-wide animations.
- Be aware of time warps: time passing faster or slower for some people.
- Animation can cause seizures.
* Trigger vestibular disorders: problems regarding human vision and balance.
One of the best books I've read, a structured, extensive and elaborate explanation of why web animations are important, how to get buy-in and easily include them in your development process.
There isn't a single trace of programming code here, what you'll find is a breakdown of the different types of animation, how to test their impact, the effects on the user cognitive flow, how cartoonists influenced UI design and web animation, how to keep pragmatic, design for accessibility and how to combine knowledge of the human vision, perception and reaction time to create animations that add context and delight.
Notes
Intro
- We use "web app" to refer to sites that are more than just plain HTML.
* For sites that look, feel, serve and perform as well as an app, animation is an essential tool.
- Animation is not just something decorative to be included at the end of the project if there's some budget left over.
* It creates experiences that go beyond mere linked documents.
* Immerses users in the illusion of life.
* Generates user confidence and trust with as much strength as a professional logo.
Human Perception and Animation
- Human vision:
* The "where system": detects motion.
* The "what system": detects form (morph) and colour.
- Avoid cut-based animation, which works on cinematography but not on the web.
* Animation should add context to seemingly disconnected elements and events.
^ And offload this context to the visual cortex, reducing cognitive load, increasing perceived speed.
- Animation makes elements relationships clear, so users don't spend time thinking what just happened but thinking what to do next.
- Tweens: in-between animation states.
* Cuts in the UI make the brain do the in-betweening.
- Sudden changes could distract users from the task at hand.
- Cone of vision: human eye is more sensitive to colour changes in the centre (things users are directly looking at), and to movement in the edges.
* Edges pick up almost no colour changes and just trigger an eye move signal.
- Change blindness: when you don't notice a change when looking at a familiar thing or returning to a familiar room.
Patterns and Purpose
- 5 types of animation:
* Transitions
* Supplements: bring stuff on or off the page without changing location or user's task.
* Feedback
* Demonstrations: show, don't tell, can explain stuff to users, rather than having them read through a manual.
* Decorative: purely aesthetics, do not convey new information, separate ordinary from extraordinary.
- Don't fall in the trap of only implementing delighters that just reinforce branding and don't improve cognitive flow.
- Wordy descriptions can indicate something being told, demonstration could be better.
Anatomy of a Web Animation
- Easing:
* Acceleration: good for system initiated animation, to not startle users.
* Deceleration: good for user initiated, makes UI feel responsive and snappy.
* Speeding up - slowing down: interaction models, when moving an element toward another.
* Linear: good for fades or colour change.
* Bouncing.
- Humans take 200-300ms to react to visual changes like clicking on a just enabled button.
- It takes 70-700ms for the human eye to move.
* Shorter animations near the centre of the cone of vision are better, 70-200ms.
^ While longer toward the edges, 300-700ms.
- Changing colour on hover might be too slow over 100ms and moving something across the page below 300ms might be too fast, test to see what feels right.
- When working on an animation for long, it may feel faster than it really is.
- Tokenise animation durations and timing functions in style-guides in order to standardise animations across the site.
Communicating Animation
- Storyboards can help quantify element animations, by describing what, how and why things animate.
- Animatics: videos of storyboards with audio tracks of actors reading their lines and the soundtracks.
* Try Adobe After Effects or PrincipleForMac.
- Try Framer for UI prototyping.
- Generate buy-in:
* Add animations to the style-guide.
* Show side-by-side prototypes to stakeholders showing the site with and without them.
Best Practices and other Educated Guesses
- The fact that people notice and praise your animations, might be a red flag, they're spending cognitive power on them, the opposite of what you want.
* You want animation to provide context, and only be noticed when you want to attract users attention, like demonstrative animation.
- Keep consistency, if an element entrance is animated, the exit should be as well.
- Avoid FOULS: flashes of unloaded/ing states.
* Use Facebook Shimmer or spinners in place of loading images.
- Adding motion blur (smear of motion) can help fast movements register better at low frame rates, makes the retina see smoother motion.
* Try fading the object in the middle of its trajectory and back again at the end to give the impression that it moved so fast as to not register.
- The Web Animations API would help you provide users with a way of speed up or slow down site-wide animations.
- Be aware of time warps: time passing faster or slower for some people.
- Animation can cause seizures.
* Trigger vestibular disorders: problems regarding human vision and balance.
This entire review has been hidden because of spoilers.
September 6, 2017
This was an illuminating yet straightforward guide to animation for the web. It's an exciting time for web animation, defining what it's capable of and removing the old jaded expectations from Flash. This book helps us create useful, beautiful and functional animations. Thanks Rachel
August 31, 2017
This book is intended for anyone who works in the web industry. From the information architect to the front-end developer and even for back-end devs. It will help you understand how animation can enhance your websites with little details and thoughts.
The examples in the book are well detailed and even without checking them live you can easily understand their meaning through multiple screenshots.
I especially liked this book because of its length.
It's easy and quick to read thanks to a straightforward content.
The examples in the book are well detailed and even without checking them live you can easily understand their meaning through multiple screenshots.
I especially liked this book because of its length.
It's easy and quick to read thanks to a straightforward content.
August 29, 2017
A lot of people still think web animation is unnecessary and that it causes performance hits. If done properly, animation does not cause performance hits. It brings a brand to life and improves the whole experience.
Rachel does a great job exploring the reasons why animation is an essential part of the web. She explores traditional animation principles and shows how these are present on web animation.
This is a great book to understand why you should invest in doing high quality animation and how your website can benefit from it.
Rachel does a great job exploring the reasons why animation is an essential part of the web. She explores traditional animation principles and shows how these are present on web animation.
This is a great book to understand why you should invest in doing high quality animation and how your website can benefit from it.
October 14, 2017
Amazing primer on ways to consider animation for all audiences in your interactive digital projects. Funny, short, well-written and well-annotated, plus recommendations for further studying. The charm of the illustrations comes through clearly even on e-ink readers. Most importantly, the book is focused on real-life applications, so you’ll get tips on how to sell the importance of animation to your projects’ stakeholders.
December 3, 2017
This has been a very pleasant to read introduction into the world of animation with a slight lean into web animations. If you’re even remotely interested into any of the things, do yourself a favor and get this book 🙂
October 31, 2019
The fact that Rachel came from a traditional animation background helps her explain the differentiators of web animation, the guidelines of animation usage in the web, and the empathy towards motion sensitive audience.
September 16, 2017
Es un libro bastante breve pero te aporta mucha base a tener en cuenta cara a plantear animaciones en tu UI.
February 24, 2020
Amazing 👌
May 20, 2025
A pretty light read, which can be finished in about an hour and a half. I think a book is like a checklist when it comes to designing animation for a web app that I will refer back whenever I need.
February 21, 2022
The essential book about web animation.
Displaying 1 - 13 of 13 reviews