UI animations / Micro interactions

I don’t have too much to say about these, I don’t claim to be the world’s greatest motion designer but it’s something I enjoy when I get the chance!

These small interactions help bring a little joy to an overall experience and bridge a gap whilst clever things happen in the background. 

The process looks like this:

  1. Use my head to think of a basic idea.
  2. Scribble it down with a pencil.
  3. Fire up After Effects and get the basic animation created.
  4. Tinker around with timings and easings.
  5. Export with Bodymovin and implement across web and native using Airbnb’s handy tool, Lottie.

Below there are four variations around the same theme.

Consistency yeah??

Confirmation animation
Fancy confirmation
Generic loader
Trades app loading state