Rachel Nabors classifies UI animation into 3 groups according to their purpose

• Stateful
• Supplementary

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

Also 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, color and animation.

Stateful Animations

The following events are a great start for stateful CSS Animations

Browser Events

• Loading
• Scrolling

Human Events

• Hovering
• Clicking

Timed Events

• Timeouts
• Choreography

Libraries to look at later

• Skrollr
• Waypoints

An idea.

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.

Chaining animations

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.

So we make use of JavaScript events that fire only when the animation is done like

• animationstart: Fires when animation starts
• animationend: When animation ends
• animationiteration: every time it finishes a single animation loop
• transitionend: Fires when a transition ends