Developer documentation

Animations

The use of beautiful, subtle animations helps meld the digital into the physical world. Animations convey status, provide feedback, and guide the user towards useful next steps. When used appropriately, animations help the user suspend their disbelief and immerse herself into the blend of digital and reality.

Use animations to introduce or remove digital objects from the world.

  • Things in the real world don’t just pop in and pop out!
  • Build a continuous narrative by introducing or removing objects in the digital world through easing it’s presence into the world. This can be done with size, opacity or even thematic transformations.
  • Animations like grow helps introduce the user to the presence of new objects. Animations like shrink help the user follow the lifecycle of the object.

Use believable animations.

  • While animations orient people to the movement of objects in the scene, having unreasonable or unrealistic animations might instead make it feel jarring.
  • Most often, this means that animations should conform to physical limitations. It would be interesting if an object simply dissolve into thin air, but it might be pushing expectations if the object explodes but does not leave a mark.

Animations should be subtle and not distracting.

  • Similarly, use animations to show the user what is happening, but make sure that it does not distract the user from the main task.
  • There is such a thing as over animating! Animations should be consistent.
  • A familiar and consistent experience helps keep the user in flow and engaged. Having inconsistent animations may interrupt the user’s flow because it distracts from the user’s flow and pull the user out of the experience.