10 minutes

Basics, Sketch, Multiple Timelines

Animating Your Design | Check Box (2/3)

Learn how to structure your Flow file and create clean timelines that you can import easily into an iOS project.

If you completed the previous tutorial, you should already have a design file to work with. Otherwise…

Grab the file

An Animatable File

In our Sketch file there are 6 artboards, 4 of which we’ll use for animations and one of the other two we will use for helping us with layout.

Let’s start with the checkbox.

Check Box Animation

The check box has 3 layers:

• checkmark
• inner box
• outer box

Let’s get to it.

1. Create a new Flow file
2. Load checkBoxAnimatable.sketch
3. Select checkBox for the t0 position
4. Select checkBoxEnd for the t1 position
5. Rename the new timeline to checkBoxForward

Hit Play

It’s actually not too bad out of the box… but we can make it better.

Check Mark Animation

We first saw how to use the stroke end property in the CodePen and Dribbble tutorials.

1. Move the playhead to t0
2. Select the checkMark layer
3. Set its stroke end to 0
4. Drag the first keyvalue of the newly created track to 0.25s
5. Change the easing to Ease Out

Inner / Outer Boxes

For the inner and outer boxes we will change their duraton and easing.

1. Drag the first keyvalue of the checkBoxInner track to 0.25s > this will move all its child keyvalues.
2. Drag the last keyvalue of the checkBoxInner track to 0.75s
3. Area-select all of the keyvalues for checkBoxInner animations
4. In the property panel, change the easing to Ease In
5. Drag the last keyvalue of the checkBoxOuter track to 0.5s
6. Area-select all of the keyvalues for checkBoxOuter animations
7. In the property panel, change the easing to Ease Out

Scale the Timeline

Finally, this animation is way too long. UI animations should be relatively fast – iOS defaults to 0.25s – so let’s shorten the duration of the timeline.

1. Tap the clock icon on the far-right side of the timeline
2. Set the value to 0.5s
3. Tap the scale button

Here is what your timeline should look like:

Hit Play

Duplicate & Reverse

We’ve created the forward animation, now let’s create the reverse (which will get triggered when a user un-checks a button).

1. Right-click on the checkBoxForward title, select Duplicate
2. Rename the new timeline to checkBoxReverse
3. Right-click on the checkBoxReverse title, select Reverse

Hit Play

Background Animation

This step is pretty easy… we’ve already created our assets so that they animate the way we want. We’ll only need to tweak the duration and easing to get a nice effect.

1. Create a new timeline by clicking the + button, or pressing ⬆︎⌘N
2. Select background for the t0 position
3. Select background for the t1 position
4. Rename the new timeline to backgroundForward

Tune the Animation

Let’s tighten up the animation.

1. Delete the path track > sometimes this gets added, but we don’t really need it.
2. Select all the keyvalues for x, width and height
3. Change their easing values to Ease In
4. Drag the last keyvalue for the opacity track to 0.75s
5. Change its easing to Ease Out
6. Scale the timeline duration to 0.5s

Here is what your timeline should look like:

Duplicate & Reverse

Same as above, but now for the background…

1. Right-click on the backgroundForward title, select Duplicate
2. Rename the new timeline to backgroundReverse
3. Right-click on the backgroundReverse title, select Reverse

Layout

It’s handy to have a non-animating timeline that you can reference for layout q’s etc.

1. Create a new timeline
2. Select end for the t0 AND t1 positions
3. Rename the timeline to Layout

Done.

You can export this to an xcode project to reference the layout, fonts, etc.

Ready to Animate

So, now you have a Flow file with 5 timelines in it. This is perfect for handing off to a developer. In the next tutorial we will integrate the 4 main timelines into the standard iOS UIButton.

Walkthrough

Here is a quick vid of all the steps above.

❤︎