Happy Save Button

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.

Intro

This tutorial walks throug from a very early point in the design phase… Imagine you’ve envisioned this animation…

A save button that uses a happy face as a progress indicator.

…and you’ve created the various steps as assets in Sketch, but haven’t prepared anything for Flow.

Starter Sketch File

And, if you want to jump straight to the end…

Final Files

Prepare Your Sketch File

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:

The various steps for the animation, laid out in descending order.

This is a good layout of the various steps in the animation. From top to bottom we have:

  1. Main state
  2. Pressed state
  3. Shrunk with a smile asset
  4. Mid-point color
  5. Final color
  6. Check mark
  7. Final state

Will we need all of these states to import into Flow? No… Here’s how to think about pulling this together.

What You Really Need

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)

Create a New Page

Make a new and add a new artboard sized to the button design – 300 x 70.

We only need a single artboard for this animation.
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.

Copy the Assets

Now, copy the following assets into the artboard you just created.

  1. The pink background shape.
  2. The label that says saved « YES, the longer label with the d
  3. The face
  4. The checkmark
We only needed 6 layers from the assets page.

That’s it… We’re now ready to tweak these elements into animatability.

Rename Everything

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:

BAD

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:

Too many ovals.

GOOD

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:

Each layer is clear, conscise, and easily identifiable.

Keep it Simple

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.

Two Faces

The easiest way to “fill in the face” is two use copies – one dark, overlaid with one light. Let’s set that up…

  1. Group the leftEye, rightEye and smile layers.
  2. Rename the group darkFace
  3. Duplicate the group and rename it to lightFace
  4. Change the fill color of the eyes to white

Your design file should look like this:

The layer hierachy is clear, the basic assets are prepped and ready to animate.

Done. We’re ready to Flow.

Animatable Paths

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. 
You can do this with a circle.

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.

Flow

Head on over to Flow where we’ll finish setting things up, and get started with our animation.

Setup

First, let’s get things ready.

  1. Import the artboard
  2. Zoom to 300%
  3. Expand the timeline duration to 4.0s

You can change the timeline duration by tapping the small clock icon above the right-hand side of the timeline.

backgroundShape

We’ll start with the background because it’s most visual part of the animation.

  1. Hide all layers except the backgroundShape
  2. Move the playhead to 0.25s
  3. Lock the w/h and change the height to 60
  4. Change the fillColor to #CF0263 (or r: 207, g: 2, b: 99 if you’re not on OSX 10.14)
    The background quickly shrinks, changes color, and returns to its original state.
  5. Move the playhead to 1.0s
  6. Unlock the w/h and change its width to 70
    The animations starting point for this animation is created at 0.75 seconds.
  7. Move the playhead to 2.0s
  8. Change the fillColor to #0CCDA2 (or r: 12, g: 205, b: 162 if you’re not on OSX 10.14)
  9. Select the previous color keyvalue, press OPTION (⌥), then it to 1.0s
    The animations starting point for this animation is created at 0.75 seconds.
  10. Move the playhead to 3.1s
  11. Change the width to 300
  12. Select the previous color keyvalue, press OPTION (⌥), then drag previous keyvalue to 2.6s
    The animations starting point for this animation is created at 0.75 seconds.

That’s it, the main background animation is in place. Check it out:

The background animation is done.

darkFace

Let’s animate the dark face now.

  1. Reveal the darkFace layer
  2. Turn on relative mode (⌘⌥R)
  3. Select the smile layer
  4. Rotate the shape to 90°
  5. Set the stroke end to 0.5
The smile behind the smile (eventually).

Using stroke start and end are great for animations and iOS. But, if you’re exporting to HTML you’ll have to use dashPattern and the pattern offset to get the same results.

Animating the Face (pt1)

Next, we’re going to add a subtle scale animation to the face. This requires a couple steps.

  1. move the playhead to 0.75s
  2. turn off relative mode
  3. select the darkFace group
  4. scale it to 20 x 20
  5. change the smile’s stroke width to 4
  6. change the group opacity to 0
    The animations starting point for this animation is created at 0.75 seconds.
  7. select all the keyvalues for all layers of the darkFace group at 0s
  8. delete them
    Deleting the keyvalues at `t=0` means this is how the layers will look at the beginning of the whole animation.
  9. select all the keyvalues for all layers of the darkFace at the end of the timeline
  10. move them to 1.0s
    Moving the keyvalues from the end to `1.0`s makes this part of the face animation a whopping 1/4 second long.
  11. Move the playhead to 2.0s
  12. Change the fillColor for leftEye and rightEye to #28987F
  13. Change the strokeColor for smile to #28987F
    Changing the color of the eyes and smile.
  14. Move the first keyvalues for the new animations to 1.0
  15. Delete the last keyvalues
    Now the face changes color nicely.
  16. Change the opacity to 0
  17. Change the new animation’s curve to step left
    Once the face is completely filled in, we don't need to see the dark version anymore.

The step left animation curve makes it so the change in value happens right at the last moment of the animation.

Did you see that face snap out?!

Now, let’s animate the filled in portion of the face.

lightFace

Our next goal is to animate the filled in version of the face. Let’s start with that smile ;)

reveal the lightFace layer turn on relative mode (⌘⌥R) select the smile layer rotate the shape to 90° set the stroke end to 0.5

These were the same steps that we did to the dark version.

Animating the Face (pt2)

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.

  1. Turn off relative mode
  2. Move the playhead to 1.0s
  3. Select rightEye and change its size to 5 x 5
  4. Change its opacity to 0
  5. Delete all the new keyvalues at t=0
  6. Move the all the keyvalues for rightEye from the end of the timeline to 1.25s
    A quick 1/4s animation to scale and reveal the right eye.
  7. With the playhead at 1.25s, change the smile stroke start to 0.5
  8. Delete the first keyvalue from the stroke start track
  9. Move the last keyvalue to 1.75s
    The smile isn't visible at 1.25s.
  10. Move the playhead to 1.75s
  11. Select all the keyvalues for the rightEye animation
  12. Copy them to the clipboard (⌘C)
  13. Select the leftEye
  14. PASTE the keyvalues onto the left eye!
    Yeah baby. You can past keyvalues.
  15. Delete the first values that appear after pasting.
    Yeah baby. You can past keyvalues.
  16. Move the playhead to 2.25s
  17. Select the lightFace group
  18. Change its opacity to 0
  19. Move the first keyvalue to 2.0s
  20. Delete the last keyvalue
So smiley.

checkMark

Let’s animate the checkmark now.

  1. Turn ON relative mode
  2. Reveal the checkMark layer
  3. Change its stroke end to 0
  4. Turn OFF relative mode
  5. Move the playhead to 2.60
  6. Change its stroke end to 1.0

  7. Move the first keyvalue to 2.35s
  8. Move the last keyvalue to 3.35s
  9. Pressing option (⌥) drag the middle keyvalue to 3.1s
So checkey.

titleLabel

Last but not least, let’s do the title.

  1. Reveal the titleLabel
  2. Move the playhead to 3.1s
  3. Change its opacity to 0
  4. Move the first keyvalue to 0.5s
  5. Move the playhead to 0.75s
  6. Change its opacity to 0
    The saved should fade in and out with a big gap in the timeline now.
  7. Keeping the playhead at 0.75s
  8. Delete the d from the layer’s text field
  9. Delete the first keyvalue from the newly minted String track
    Now the text changes.

FIN.

That’s it! We’ve created a nice button animation, and learned a few things along the way like:

  • How to properly structure a Sketch file for animation
  • Using the path stroke end to animate along a path
  • Tricks for copying / pasting keyvalues
  • How to use step functions
GOOD WORK!

❤︎

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.