Rachel Nabors classifies UI animation into 3 groups according to their purpose
Stateful animations are useful for
- Changing in task flow location
- Showing where the user is now and where they’re going
Supplementary animation accentuate secondary information to the main state. Think of opening a modal, introducing a hint or something.
Supplementary animations are useful for
- Showing users what is possible
- Showing a change in information
- Important details that shouldn’t be overlooked
decorative animations don’t contribute a whole lot.
Animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised. - Scott E. Hudson and John T. Stasko (1993)
Animacy was a term introduced in an animation paper titled It’s Alive! Animate Motion Captures Attention. An excerpt
These speeded responses appeared to be due to the perceived animacy of the objects… We conclude that animate motion does indeed capture visual attention - It’s Alive! Animate Motion Captures Attention (2010)
- Human attention can be grabbed by 2 things,
The following events are a great start for stateful CSS Animations
Libraries to look at later
Think of all the awesome things I could do with the intersection Observer API. Think of adding and removing the class of an item while it’s in view. Think of adding a class of dark when the user scrolls to a particular part of the page.
We can make an animation play only when the current one is done play. We would normally do this by putting a delay on the that equals the duration of the current animation.
There’s a problem with this approach. We can’t trust the browser enough to appropriately schedule the animation.
More often than not, there are some delays that result when the main thread is busy, the delay makes our animation duration unpredictable.
- animationstart: Fires when animation starts
- animationend: When animation ends
- animationiteration: every time it finishes a single animation loop
- transitionend: Fires when a transition ends