Animate Your Design

In this episode, we’re going to animate our little hearts out. Follow along and you’ll get a great overview of how to use Flow, with an eye towards getting your animation into a real project.

Import your Animation

Let’s start by creating a new project.

This step starts at 0:08

1. From Flow’s Welcome Window, choose the New Project option.
2. Link the heart.sketch file.
3. Create a new animation with the unliked and liked artboards.
4. Save the project as LikeButton.flow
5. Reorder the layers by moving the plusIcon to the bottom of the layer hierarchy.

The Grey Heart

The grey heart shape (i.e. the layer named heartGrey) is supposed to bounce, then fade away. Let’s start with the bounce and go from there.

This step starts at 0:51

1. Move the playhead to 0.5s
2. Select the heartGrey layer
3. Shift+Option+Drag the layer to shrink it a little bit.
4. Select all the keyvalues (including opacity)
5. Shift+Drag the last keyvalue to 0.4s (this scales the animation)
6. Drag the first keyvalue of the layer’s opacity track, to 0.20s.

The Red Heart

The red heart shape (i.e. the layer named heartRed) is supposed to fill in from the bottom. The default animation shows that the redLayer is slightly offset, we’ll have to fix it first using Relative Mode.

This step starts at 3:21

1. From the layer hierarchy panel, select the redLayer
2. Turn on Relative Mode by pressing Option+Command+R
3. Move the layer to the left so it is centered to the middle of the hear (~x = 17.43)
4. Turn off Relative Mode
5. Open the Y track of the layer’s animation
6. Drag the first keyvalue to 0.28s
7. Drag the end keyvalue to 0.54s

The Plus Icon

There are two steps in the animation for the plusIcon.

The Bounce

First, let’s animate the bounce effect.

This step starts at 5:05

1. Move the playhead to 0.5s
2. Scale the icon up a bit by pressing Option+Shift while dragging one of its handles.
3. Select all the keyvalues for the newly created Width and Height tracks
4. In the properties panel, change duration of the selected animations to 0.26s
5. Lock the duration of the animation
6. Change the animation start point to 0.32s, which should shift all the keyvalues to the right

The Fade (In)

Now, we’ll animate the fade in of the plusIcon

This step starts at 6:08

1. Select the first keyvalue of the Opacity track
2. Command+click the first keyvalue of the redLayer’s Y track
3. Press the Align Right button at the top of thee properties panel
4. Select the last keyvalue of the Opacity track
5. Change its time, in the properties panel, to 0.5s

The Fade (Out)

We want a pause in the opacity animation of the redLayer.

This step starts at 6:52

1. Duplicate the first keyvalue of the redLayer’s opacity track by pressing Option while dragging it.
2. Drop the duplicated keyvalue at 0.75s
3. Duplicate the second keyvalue and drop it at 0.66s

When two adjacent keyvalues have the same value, there will be a gap in the timeline.

Clip the Timeline

We’re done our aniamation, but the Timeline is too long.

This step starts at 7:58

1. Click the clock icon to the right of the Timeline.
2. Set the Timeline Length to 0.75s
3. Click the Clip button

The duration of the timeline is now tight to our animation.

Up Next

In the next screencast we’re going to take this animation and we’re going to export it as iOS code. See ya soon.

Export Your Animation to Code