Video: You should be using these three animation principles

In this video tutorial, we’ll take a look at a few animation principles that come from old-timey Disney animation days: secondary animation, arcs, and solid drawings. As you’re building out animations for your products, you’ll want to keep these three principles in mind.

For those who prefer reading to watching, check out a quick summary below the video.

Secondary animation

The big box in this animation is the primary action, and the little box is the secondary animation. It’s happening because of the main action, and after as well.

Let’s explore how we can apply this in a UI scenario.

In this example, there are three options. When we click, you see the Japan card grows to fill the screen more, and after the other two options, we see text bars slide in as our secondary animation.

When that space opens up, they now have a place to live. To enhance the secondary action, each line of text slides in a bit after the previous one.

Here’s what that looks like inside the timeline.

Solid drawings

The principles of solid drawings may not be the most obvious thing when it comes to UI animation. What it means is you want to think of the things on your screen as having some physical characteristics. Is it heavy or light? Is it glass or wood?

Using this same example, when I click on Japan, you’ll notice it expands to fill the space. It’s growing and it feels like a real thing that’s alive. What it didn’t do was just pop into the new state. It grows and expands and the image inside moves at the same time. There’s a sense that it’s something that is alive.

The Australia and San Francisco options slide off the screen—they don’t just disappear into nothing. The text options down at the bottom also use the solid drawings principle because they are “real things” living off the screen. They come in and go out in the same space. It gives them a sense of having a solid sense of existence.

Arcs

The arcs principle notes that things in nature don’t tend to exist in straight lines. Things tend to move in arcs. Their outlines are made with arcs. Arcs are everywhere, and few straight lines exist in nature.

We have these icons sliding on and off the screen. To take advantage of the arcs principle, they have a rotation change and an angular position change. This gives it that arc animation that makes things feel more realistic.

One more example of getting an arc in Studio: When you click on the small, circular icon, it grows upward and spreading out to the right. What’s neat about this one is that it’s not a real arc, per se, but your eye doesn’t know the difference. It’s a subtle way to give the appearance of an arc as it’s animating up and to the right. This turned out to be a really simple way to include the arcs animation principle in your UI animation.

Have you tried out one of these principles? Share your work with us on Twitter: @InVisionApp.

Read more about motion design