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
This design requires making 4 identical text blocks, and creating a group that will be used for masking once we get into Flow.
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
0is in the proper position
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
⌘+Gto turn it into a group
Now, we’re going to duplicate and position our final layers.
This step starts at 4:51
endartboard move the text layers into their final positions
thousandslayer goes up to the first
hundredslayer goes up the 2nd
tenslayer goes up to the 3rd
oneslayer goes up to the last
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
1sand turn Relative Mode OFF
Now, here’s the trick to add a clipping mask without using a clipping mask.
This step starts at 7:08
Mask to Boundsoption in the property panel
Now your group will clip to its border.
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
Cubic In Out
4sand move them to
Cubic In Out
result(s) found for “”.