How on earth do you get animations out of your head and onto a screen? What properties or values need to change to execute your idea? Try describing it and you’ll find it’s tough. Waving your hands around won’t help much either. So if you want to communicate your intentions clearly you’re going to have to understand how animations breakdown and what exactly is happening at each step.
The best place to start is by looking at examples. And the best place for examples I’ve found is CAPPTIVATE.co. If you look closely at the various animations listed on that site and examine them carefully you’ll start to see patterns emerge. The same effects are being executed over and over again. And the majority of those effects are being created by manipulating just 3 properties: position, opacity and scale. Let’s define these properties.
- Position is the X and Y coordinates of an item on screen. Every element has a position and that can be changed over time.
- Opacity is the alpha transparency of an element. It can range from from 0 which is invisible to 100% which is opaque.
- Scale is the size of an item relative to its actual size. A scale of .5 means the item is half it’s actual size.
With just these 3 properties it’s possible to create some very effective UI animations. Lets take a look at a simple example: an iOS modal alert.
This is a simple animation. But it’s a good example of changing two different properties (scale and opacity) to produce one effect.
If you look closely at what’s happening, it breaks down like this: the modal starts at a scale larger than it’s original size and is animated down. At the same time the modal’s opacity is animated from 0 to 100%. And that’s it. Simple but effective. And much better than abruptly shoving a modal window into the centre of the screen.
Here’s another example:
In this example a panel slides in from the bottom of the screen and is positioned on top of the product detail panel. This paper overlay effect is produced by manipulating the panel’s position, specifically it’s y coordinate which is increased. The effect is enhanced by reducing the scale of the background and animating it’s opacity down to 80%.
This is a neat animation effect which gently guides the user into the new UI screen with ease. Again it’s a simple animation but an effective one.
Lets take it up a notch and look at an example that has a lot more going on.
This animation has more scenes, more motion and more elements whizzing around and changing position but if you look closely and examine what’s actually happening at each step it’s still just 3 properties being manipulated, our good friends opacity, scale and position.
If you’ve followed along diligently to this point you’ll no doubt have noticed a strange thing: the rate at which animation properties are changing is not consistent. Certain steps in the animation are executing at a faster rate than others. This is due to timing. And timing of animation is exactly what I’m going to explain in my next post for this series.