Interaction ProTip #3: Offsets and Opposing Motion

I’m going to talk about the use of offsets and opposing motion in animation and how they relate to interactions. Part of creating compelling user interfaces is through guiding a person’s eye. We have to strike a balance of branding, responsiveness and polish.

Offsets

Offsets are a key weapon in your arsenal because, while they slow down an animation a little, they add a significant amount of interest and polish to the experience.

Let’s start with a list that animates in from the side. I’ve made it as un-showbiz as I can muster.

Without an offset

You’ll probably notice straight away that this feels very uninspiring. Part of this is because I was a little naughty and chose the default ease-out CSS transition, which is a snore fest, and which by now you should know not to use. But a big part of this is down to the fact that all the items come in together, and we can do better than that by giving each list item an offset.

With an offset

Things in nature tend to exhibit overlapping motion, so I guess our eyes are probably tuned to that and give it the visual high five.

Offsets, then, are A Good Thing™.

Opposing Motion

Contrast is also a good thing to add a bit of interest to your UI’s motion. (Why else would I be talking about it?) The easiest way to provide contrast is to scale something up while scaling something else down, or animating items in opposite directions.

Let’s try adding a bit of opposing motion to our list:

For my personal tastes this is a bit much. It kinds of screams that I wanted things to be interesting and I won’t rest until I’ve shown you my animation prowess. Still, it’s a taste thing, you may feel differently.

Bringing it all together

If, like me, you find the from-the-side motion a little too much, you may prefer one where we come in from the top:

Each item in the list has an offset that delays its incoming animation, but there’s also a couple of subtle additions to this demo: the labels themselves are in opposing motion to the blocks, coming in from bottom to top and the blocks themselves scale up from nothing. When combined these effects give the illusion of something a little more complex, while being relatively subtle.

Conclusion

Next time you’re animating a UI see if you can add a touch of contrast or some offsets. It really adds a lot of personality to your work.