Structuring AnimationsAKA Keep Things Similar
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:
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…
Let’s walk through the following file:
It should look like this:
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.
In this animation, the shape layer hierarchies have been switched, and so have the image layer hierarchies. This creates an interesting effect:
Since artboards 0, 1 and 2 all have similar structures you can also animate between layers 1 and 2:
Now, Layer 3 has a different layer order. Instead of:
…the hierarchy reads:
If you try to animate between any of the first layers and Layer 3, you’ll get an error message like this:
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.
There are two main ways you can go about preserving your layer hierarchies in Sketch.
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:
So, you want a transition where the contents of one screen slide away while a second screen slides in.
Looking at the
BarcelonaToMilano artboard, we can see that all the elements of this animation have already been laid out.
Let’s see how we can animate this.
First, let’s duplicate the artboard.
Make a copy of BarcelonaToMilano
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.
So, you can start editing elements until it looks the way you want.
Edit the Milano Artboard so that it looks correct.
Wham. You’re good to go.
Animate between the Barcelona and Milano 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, 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, dupicate the combined artboard.
Duplicate the artboard.
Rename one of the artboards to Start, and the other to End.
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.
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.