codesphere

High-quality animations are everywhere on today’s web, which is great for us as users, but it doesn’t make life easy for you as a designer But why should you care? What is it that makes animations so important that you should prioritize them in your, probably already very busy, schedule?

Well, unfortunately, Netflix we are all so used to in apps and on the web, there is a good chance that users already have a high expectation of what your app should look like and what it should feel like.

High-quality animations and UIs are present in almost every successful app and audiences expect it to be part of their experience; Tinder’s swiping function, browsing through music on Apple music or panning around Google maps are a few examples of some excellent animations that are integrated to the core user experience of their respective apps app.

What are web animations?

Before we jump into some tips on how to make good animations let’s take a quick look at what an animation actually is. Understanding the fundamentals will help you make better animations in the end.

In short, web animation is the visualization of change — something that starts in one state and ends in another state. The animation is how it gets from one to the other and how you handle states in between (the “interpolated states”) is what is important. The duration you take to get from the start to the end state and the journey you take your users on while doing it is a bit of an art form in itself.

Browsing functions, like turning a page in a digital book or moving through shows on Netflix and the selected show growing to display its details, are both animations. If it changes the state of an element in your UI then it’s very likely an animation.

So we have a pretty good idea about why web animations are important and what they actually are, so let’s take a look at some rules to remember when making your own.