# Animating a Number Counter

In this quick cast, we decipher Howard Pinsky's Simple Animated Number Counter on Dribbble, rebuild the foundations in Figma and bring it to life in Flow.

Here is the original shot:

If you’ve got a Dribbble account, head over and L the original shot: Simple Animated Number Counter

To get started, you can do this whole tutorial from scratch or grab the Figma file and head on down to Import and Adjust.

This design requires making 4 identical text blocks, and creating a group that will be used for masking once we get into Flow.

### Lay Out Your Text Layers

There are 4 number positions in the original design, so we’re going to create 4 text layers that we will animate.

This step starts at 0:37

1. Create a new file with a `400x300` artboard
2. Create a text layer with a single `0`
3. Position and style the text layer
4. Add 4 recurring sets of values so that there are 40 numbers, each on a new line (0, 1, 2, 3, 4, 5, 6, 7, 8, 9)
5. Position the 4 layers so that their first `0` is in the proper position
6. Rename your layers to `thousands`, `hundreds`, `tens`, and `ones` (from left-to-right)

### Create the Group

There is a great technique in Flow for masking to the bounds of a layer or group. We’re going to use this feature to mask the counter, because you should always try to avoid over-using masks.

If you’re making a square mask, then in software there are techniques like `overflow: hidden` and `masksToBounds = true` that are far better options than embedding a rectangular mask layer.

This step starts at 3:25

1. Create a rectangle `400x140`
2. Position it in the middle of the artboard
3. Press `⌘+G` to turn it into a group
4. Send it to the back of the layer hierarchy

### Create the End Artboard

Now, we’re going to duplicate and position our final layers.

This step starts at 4:51

2. Rename your artboards to `start` and `end`
3. On the `end` artboard move the text layers into their final positions
4. The `thousands` layer goes up to the first `2`
5. The `hundreds` layer goes up the 2nd `0`
6. The `tens` layer goes up to the 3rd `1`
7. The `ones` layer goes up to the last `8`

Use a ruler / guide to help you position the layers along a consistent baseline

When working with Typography you may have to, from time to time, re-adjust things. Unfortunately, almost every tool has its own way of handling and rendering typography, so there may be discrepancies between things like baseline and kerning.

Since we’re working with the βeta version of Figma import, there are a few inconsistencies.

This step starts at 5:53

1. Create a new project
3. Add your `start` and `end` artboards
4. Turn Relative Mode ON before making broad changes
5. Make sure your fonts are all consistent with your original design (The file above used `Roboto-thin`)
6. Move the playhead to `1s` and turn Relative Mode OFF
7. Readjust the final position of the animation if needed.

This step starts at 7:08

1. Turn Relative Mode ON
2. In the hierarchy panel, select the 4 text layers and drag them into the group.
3. Delete the shape layer inside the group
4. Rename the group to `counterGroup`
5. Select the group
6. Turn on the `Mask to Bounds` option in the property panel

Now your group will clip to its border.

## Animate!

Everything is in place and we’re ready to animate this counter. At this point, you should only see animations for the `Y` values of the text layers in your timeline. If other animations have snuck in by accident, you can delete them.

This step starts at 7:58

1. Scale the timeline to `4s`
2. Change the easing curve for all the `Y` animations to `Cubic In Out`
3. Extend the timeline to `10s`
4. Duplicate the starting keyvalues and move them to `10s`
5. Duplicate the keyvalues at `4s` and move them to `6s`
6. Change the easing curves of the animations starting at `6s` to `Cubic In Out`

result(s) found for “”.