Good to great UI animation tips

Practical suggestions to improve your UI micro-interactions.

Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon.

To create these animations, I followed the guidelines from Material Motion, IBM’s Animation Principles, and The UX in Motion Manifesto.

All of the interactions were made using the early-access version of InVision Studio. You can download the source files here.