Animation in UI design

Lately we’ve been focussing on adding more animations to our interfaces.

Thanks to technical advances such as hardware accelerated CSS animations creating animations that run smoothly across the board is now realistic.

But first, why animate at all? There’s two main reasons. Animation can add a touch of delight in an otherwise “boring” interface. It can also help to draw attention to certain aspects of the UI. If something moves it’s more likely to be noticed.

In this post I want to highlight some examples that we created. First up is a success animation that is used after entering a form’s details:

See the Pen Success Animation (pure CSS) by Simon Wuyts (@simonwuyts) on CodePen.

Here’s an older animation that can be used to make a the background of a website more lively, for example a login form.

See the Pen CSS Holo animation by Johan Ronsse (@wolfr) on CodePen.

And here’s another example that shows a screen where a user is waiting for some external activity to happen:

See the Pen Radar scan by Johan Ronsse (@wolfr) on CodePen.

If you’ve ever been to a concert that uses Ticketmatic to scan your tickets, a variant of this animation is used on the scanners while idle.

What all of these animations have in common is that purely work using CSS, without any external libraries. This keeps the file sizes light and avoids external dependencies.

We have experimented with libraries like GSAP but up until now we haven’t needed extensive libraries.

We are looking forward to experimenting with animation to make our interfaces more attractive.