Back to overview

Timing (and Spacing) Really Are Everything

Timing and spacing together creates the the illusion of an animated object obeying the laws of physics.

Cubic-Bezier functions

Develop your own library of cubic-bezier curves, it allows you to be more expressive and custom in your animations.

A cubic-bezier curve consists of four values = (x1, y1, x2, y2)

Follow-Through

An animation that has follow-through means it has so much energy that it overshoots its target and then settle into place. This can be represented in code with a bezier curve that goes outside the boundaries of its matrix.

Anticipation

Anticipation is pretty much the same as follow-through but in reverse. For an interface, an object can move back slightly before it charges over the screen, almost as if it gathers energy before setting off.

Secondary Action

A secondary action is the complement to the main motion. A character that walks could also swing its arms, or whistle which informs the the walking movement.

Exaggeration

Strive for having exaggeration in your animations. It makes the movement more noticeable. It also create hierarchy in a group of animations.

The animation-fill-mode CSS Property

This property will set the values of the animated element either to the values it has when it ends or when it starts. The values for the property are:

  • None, Initial value
  • Forwards, The element will keep the values from the last keyframe.
  • Backwards, The element will keep the values from the first keyframe.
  • Both, The element keeps values from both the first and the last keyframe.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Don’t Make Obstacles

Avoid designing beautiful obstacles. Animation isn’t helpful when it gets in the way of the user trying to complete a task. Menus should’t need to play out animations whenever they’re opened/closed. If it gets in the way of the user; get rid of it.

Avoid blocking animations that would require the user to sit through the animation without being able to interact with it.


Books I’ve read.

Johannes Holmberg

Tiny summaries on books I’ve read. Sorted by latest read. But you can also sort on top recommendations. Highlights and covers are copyright to their respective authors.