Structuring AnimationsAKA Keep Things Similar
Let’s get started slooooowwwwwwly. This tutorial is going to walk you through the basics on how to use Flow. In doing so, we’re going to be looking at very simple cases (e.g. shapes, images, etc).
FEAR NOT WASTING YOUR TIME! The techniques you learn here will be exactly the same ones you’ll use when creating accurate, production-ready designs.
If you haven’t already installed Flow, then you should check out the Install Tutorial.
In the sketch file you recently downloaded, there are 4 pages each with a variety of artboards.
The artboards in this Sketch document are designed explicitly to show you either a property, or a technique. For example, some will show you how to create movement, while another might show how to properly create a shape to achieve an effect.
Let’s get to it.
After opening Flow, you’ll see the Welcome window pop up.
Click on Create New Project
After clicking on Create New Project, you’ll see an empty project window pop up, as well as a finder window.
Now, you’ll see the artboard selection view pop up.
When you click on either of the empty panels, you’ll see a drop-down of all the artboards in the sketch file.
Click on the left panel
To set up our first animation, do the following:
Select Squares 0 for the left-hand artboard.
Select Squares 1 for the right-hand artboard.
Your project should now look like this:
If you can't see the artboard on the stage, you can CTRL-Drag the mouse to move it into view.
Yes! Flow animates the differences to an object that occur between two artboards!
In most of your designs you’ll be using shapes. This is why we’ve spent a lot of time crafting more artboards in this category than the others (e.g. Images, Masks, Text, etc…).
That said. A lot of the properties of shapes – e.g. shadows, borders – will translate across all objects.
You’ve already loaded the first two artboards –
Shapes1 – into a project. If you have a look in sketch, you’ll see that the only difference between these two artboards is the positions of the Blue and Purple layers.
Ok, so here’s a little aside.
Double-click on the timeline title and rename it to Basic Movement.
Next, we’re going to look at animating colors. But first, we need to create a new timeline.
After you’ve renamed the firs timeline, you can add one by hitting the
+ icon in the timeline viewer’s header row.
Click the + Icon
Select File > New Timeline
Now, you can select
Squares 0 and
This animation illustrates how you can animate the fill and stroke of a shape.
Change this timeline’s title to “Colors”
From now on, every time you create a new timeline, change its title to the same thing as the section.
The next animation shows how to combine motion and rotation.
Create a new timeline with Squares 0 and Squares 3
In Sketch, the rotation for the blue and purple is
-180 for pink.
Fading and scaling are easily animated.
Create a new timeline with Squares 0 and Squares 4.
Notice how the purple layer is over top, and the blue layer is underneath the scaling layer? This is because of the layer hierarchy that has been set up in Sketch.
This is one of those properties that applies to all layer types (e.g. images, text, etc.).
Create a new timeline with Squares 0 and Squares 5.
In Sketch you can have multiple shadows. In iOS, you can't. So, if you have more than one on a layer in your design, Flow will only import the first shadow.
Oh, yes. You can animate shapes!
To get this effect > In Sketch, we duplicated the first artboard then triple-clicked into the second shape and added control points to its path.
Create a new timeline with Squares 0 and Squares 6.
Notice how the animation doesn’t look great? This is because the first shape has 4 control points and the second has 8.
To clean up the strange effect on the middle shape, we made sure that the first shape also had 8 points.
Create a new timeline with Squares 6-1 and Squares 6.
Yessss round corners work too!
If you animate from a square to something with round corners, you get a funky animation like the previous example.
Create a new timeline with Squares 0 and Squares 7.
TBH. That flickering effect is something that iOS actually does in special instances of path animations.
If you want some lovelier round corners, then simply modify the previous example. Make your round corners really tight on the first artboard.
Create a new timeline with Squares 7-1 and Squares 7.
There’s more than one way to peel a banana. If you want to fade a shape out you can use its opacity value, or change the opacity of its fill / stroke colors.
Create a new timeline with Squares 0 and Squares 8
SRSLY. I know 2 ways to peel a banana. Do you?
Ok, so ALL objects actually have a background color. This is more apparent on shapes that aren’t rectangles.
Create a new timeline with Background and Background
Yes. Use the same artboard twice.
Move the playhead to the end of the timeline.
Then, select the circle and in the properties panel at the top-right of the app.
Click on the background color well, change the color’s opacity to 1.0
You can animate the start and end positions of a stroke. That is, the end points at which a path is drawn are measured between 0.0 and 1.0, and if you change those, it will appear as if the path is animating.
Create a new timeline with Skype 0 and Skype 1.
Making sure that the playhead is at the beginning of the timeline
Select the path, change its stroke end to 0.5
Now it looks like the shape is centered on the artboard.
Go to then end of the timeline, change the stroke start to 0.5
Again, it looks like the shape is centered on the artboard.
Roll down all the tracks and change their animations easing curves to UNIFORM.
Hit Play, and loop that animation!
Alrighty. Text and typography are actually quite difficult to deal with when it comes to animation – especially on iOS. Our implementation allows you to perform some basic animations on text, and we’ll get into the why of that in a later tutorial…
Create a new timeline with Text 0 and Text 1
One of the challenges is slight discrepancies in how different applications handle things like line height.
We’ve done a lot to get really close with our typography implementations, but you might have to tweak a frame from time to time.
Adjust the frame so that you can see all the text.
Do this at both the beggining and end of the timeline.
Let’s get to it.
Scaling an image is the same technique as scaling a shape.
Create a new timeline with Images 0 and Images 1
If you want to use an image as a pattern, you can do that! In Sketch, you do this by creating a shape then changing its fill color to use an image.
Create a new timeline with Images 2 and Images 2
Then, to see the pattern animate…
At the beginning of the timeline, scale the layer’s frame so you can only see one instance of the pattern
You can flip the contents of images as well.
Create a new timeline with Images 0 and Images 3
After hitting play, you’ll see the image change in a funny way.
Try deleting either the horizontal or vertical tracks in the timeline to see the difference.
If you have two images with different contents in them, Flow will “animate” between the two.
Create a new timeline with Images 0 and Images 4
By “animate” we mean automatically switch to the new content halfway through the animation. However, you can get a nice effect if you do the following:
Move the playhead to
This is the middle of the timeline, right where the image transitions to the new version.
Select the image and change its opacity to
Now the image looks like it fades out and into a new image.
We're working on animating image content transitions smoothly in Flow.
If you’re already using a pattern as a fill color, you can custmize it (in Sketch) to apply a specific tiling behviour.
Create a new timeline with Images 5 and Images 5
This timeline won’t animate, but it will show you that the
Tile options are translated into Flow.
Critical. Yes, Flow supports masks.
You can animate a mask’s path.
Create a new timeline with Mask 0 and Mask 1
This technique is pretty much identical to animating a shape’s path.
You can rotate a mask! And, if you tweak the image being masked it will look like the mask is animating around the image.
Create a new timeline with Mask 0 and Mask 2 360
If you rotate the mask forward, while rotating the image backwards it looks like the mask is spinning around the image.
You can change the shape of a mask, while scaling its image!!!
Create a new timeline with Mask 0 and Mask 3
It looks like we’re zooming into the image.
Just like in Illustrator or Sketch, the shape of the mask actually exists as an editable object in Flow.
Create a new timeline with Mask 0 and Mask 4
See how the mask grows out of the image? Now, you can animate and edit that mask to your heart’s delight.
AAAAAND for our last trick. You can animate groups.
Create a new timeline with Groups 0 and Groups 1
Objects rotating inside objects that are rotating…
That’s the basics of how to work with layers.