Animation, Button, Playful, Sketch
In this tutorial you'll learn how to take a design comp, structure it into an animatable format, and then build a playful UI Animation.
This tutorial walks throug from a very early point in the design phase… Imagine you’ve envisioned this animation…
…and you’ve created the various steps as assets in Sketch, but haven’t prepared anything for Flow.
And, if you want to jump straight to the end…
We’re starting this tutorial right after having sketched out the concept for an animation, and well before we should import anything into Flow. Here’s what the Sketch file looks like:
This is a good layout of the various steps in the animation. From top to bottom we have:
Will we need all of these states to import into Flow? No… Here’s how to think about pulling this together.
The concept of this animation is a button. A button will be a single object, with one background… So, at a minimum we’ll need only 1 background shape – because we know that we can scale and change its color in Flow. Also, a button only needs a single title label – we can change its content in Flow as well. Finally, we will also need a copy of each of the unique assets (i.e. the face and the checkmark)
Make a new and add a new artboard sized to the button design – 300 x 70.
When you're bringing a Sketch file into Flow you'll notice the import window separates your selection by pages. So, it's generally good practice to organize the things you want to animate into their own pages.
Now, copy the following assets into the artboard you just created.
saved« YES, the longer label with the
That’s it… We’re now ready to tweak these elements into animatability.
Always. Always. Always rename your layers appropriately. It helps when you’re animating, and even moreso when things go to code. And please, by all means just follow these two examples:
Sketch does a good job of copying and renaming layers while you’re working fast. For the most part, the names of layers don’t matter when you’re working purely visually. However, when you start animating and all your layers are named some version of
Oval then it gets hard to know what you’re trying to edit.
Don’t leave your layers like this:
Rename your layers to something understandable, unique and descriptive. Don’t use spaces, and only use alpha numeric characters (none of these:
!@#$%^&*()) BECAUSE if you do want to export to code these kinds of chars just don’t mix well with compilers.
Rename your layers to this:
The face animation looks like it’s all dark and fills in with another color… At first, this may appear to be a tricky animation – you might think you need masks and odd shapes, or some kind of fancy scaling – but it really isn’t if you can think about how to break down your animation into simple components.
The easiest way to “fill in the face” is two use copies – one dark, overlaid with one light. Let’s set that up…
Your design file should look like this:
Done. We’re ready to Flow.
We’re going to modify the shape in Flow so that it only shows half of the shape’s border, making it a smile.
Also, we can animate the path of the circle in Flow. This is why we use a path instead of a solid shape.
Another way to keep things simple is to know how you can manipulate shapes / layers in Flow.
This is also why the checkMark is a path and not a solid shape either.
Now, our design is all set to be animated. Let’s get to it.
Head on over to Flow where we’ll finish setting things up, and get started with our animation.
First, let’s get things ready.
You can change the timeline duration by tapping the small clock icon above the right-hand side of the timeline.
We’ll start with the background because it’s most visual part of the animation.
Change the fillColor to
r: 207, g: 2, b: 99 if you’re not on OSX 10.14)
Unlock the w/h and change its
r: 12, g: 205, b: 162if you’re not on OSX 10.14)
Select the previous color keyvalue, press OPTION (⌥), then it to
Select the previous color keyvalue, press OPTION (⌥), then drag previous keyvalue to
That’s it, the main background animation is in place. Check it out:
Let’s animate the dark face now.
Set the stroke
endare great for animations and iOS. But, if you’re exporting to HTML you’ll have to use
dashPatternand the pattern
offsetto get the same results.
Next, we’re going to add a subtle scale animation to the face. This requires a couple steps.
20 x 20
change the group opacity to
move them to
Delete the last keyvalues
Change the new animation’s curve to
step leftanimation curve makes it so the change in value happens right at the last moment of the animation.
Now, let’s animate the filled in portion of the face.
Our next goal is to animate the filled in version of the face. Let’s start with that smile ;)
turn on relative mode (
select the smile layer
rotate the shape to
set the stroke
These were the same steps that we did to the dark version.
Now let’s animate the face. We’re going to scale and fade in the right eye, animate the smile, then scale and fade in the left eye.
rightEyeand change its size to
5 x 5
Move the all the keyvalues for
rightEye from the end of the timeline to
1.25s, change the smile stroke
Move the last keyvalue to
PASTE the keyvalues onto the left eye!
Delete the first values that appear after pasting.
Delete the last keyvalue
Let’s animate the checkmark now.
Change its stroke
Pressing option (⌥) drag the middle keyvalue to
Last but not least, let’s do the title.
Change its opacity to
dfrom the layer’s text field
Delete the first keyvalue from the newly minted
That’s it! We’ve created a nice button animation, and learned a few things along the way like:
result(s) found for “”.