Structuring Your Animations

Working with Flow is a bit different than you might be used to. This tutorial will show you a few things to be aware of.

First things first…

All artboards that you're going to animate between need to have similar layer hierarchies.

The main reason for this is:

Automagic.

To automagically animate between artboards, Flow looks at the difference in properties between two layers in the hierarchy.

So if two layers have the same type of element (e.g. shape / shape, image / image) then Flow will be able to animate between the two states.

Let’s have a look at some examples…

Basic Layer Changes

Let’s walk through the following file:

ArtboardStructures.sketch

It should look like this:

Artboard Structures

Layers 0 > Layers 1

In this animation we have two artboards with the exact same structure. The only difference is the position of elements on the second artboard.

When you animate betwen the two, you get the following effect:

Simple. There are 4 layers, each is animating to a similar layer type.

Layers 0 > Layers 2

In this animation, the shape layer hierarchies have been switched, and so have the image layer hierarchies. This creates an interesting effect:

Layers 1 > Layers 2

Since artboards 0, 1 and 2 all have similar structures you can also animate between layers 1 and 2:

Layers 0 (or 1, or 2) > Layers 3

Now, Layer 3 has a different layer order. Instead of:

Shape, Shape, Image, Image

…the hierarchy reads:

Shape, Image, Shape, Image.

If you try to animate between any of the first layers and Layer 3, you’ll get an error message like this:

Artboard Structure Warning

The reason is Flow doesn’t know how to animate from a Shape to a Layer.

In iOS you could techincally get away with animating a shape to an image, but the technique is rarely used.

Preserving Hierarchies, Two Ways

There are two main ways you can go about preserving your layer hierarchies in Sketch.

All-in-One, then Modify.

In this technique you’ll design all the elements of an animation in a single artboard. Then, after duplicating the artboard, you will modify the properties of all the layers.

Download the following file:

BuildingArtboards.sketch

So, you want a transition where the contents of one screen slide away while a second screen slides in.

Open BuildingArtboards.sketch

Looking at the BarcelonaToMilano artboard, we can see that all the elements of this animation have already been laid out.

Everything starts on one artboard

Let’s see how we can animate this.

First, let’s duplicate the artboard.

Make a copy of BarcelonaToMilano

Now, we have two artboards with identical hierarcies.

Then, rename the artboards.

Rename the artboards to Barcelona and Milano, respectively.

Now we’re ready to make changes.

First, let’s edit Barcelona so that it is the right size for an iPhone 7.

Change the Barcelona artboard width to 375.

Next, let’s edit the Milano artboard to have the proper size as well.

Change the Milano artboard width to 375 by editing the frame of the artboard.

Now, things are a bit off in the Milano artboard, but you know that the layer strucure is identical.

Two properly sized artboards. One needs some ❤︎.

So, you can start editing elements until it looks the way you want.

Edit the Milano Artboard so that it looks correct.

That's looking lovely.

Wham. You’re good to go.

Animate between the Barcelona and Milano Artboards.

Or, Combine Two Artboards

Another way to go about structuring your animations is to design two different artboards and then combine them.

Let’s look at the Barcelona and Event Details artboards.

If you tried to animated between the two of them as they are, Flow will argue with you. And, Flow is stubborn, so Flow will win.

Go ahead, try creating an animaiton between them.

So, the trick with animating between two completely different artboards is to create a new artboard with both sets of elements, then duplicate and modify.

Let’s do it.

Duplicate the Barcelona artboard.

Now we have a second version of the original artboard.

Now, before getting gung-ho and pasting Event Details into our new artboard, first group the elements we just duplicated.

Group all the elements in the new artboard.

Next, copy and group all the elements from the Event Details artboard.

Copy all the layers from Event Details

Paste those layers into Barcelona Copy

Group all the elements.

Now it looks like the second artboard!... But really, it's not. Don't tell anyone.

Now, dupicate the combined artboard.

Duplicate the artboard.

Rename one of the artboards to Start, and the other to End.

Oooh, looks like there's identical artboards.

Finally, the effect we want is the event details bit to slide up from the bottom. So…

In the Start artboard, move the Event Details group to the bottom.

Now we can animate between the two artboards! Fancy.

If Sketch removes the group from the artboard, you can simply drop it back in.

Wham. That’s it, you’re good to go.

Animate between the Start and End artboards.

❤︎