Create an animated number counter
A while back I posted a simple number counter on Dribbble, and a bunch of you wanted to know how it was done, especially the speed variation of the number columns. So let me show you how you can achieve this in just a few minutes.
WHAT YOU’LL LEARN IN THIS VIDEO
Creating object masks
Animate between artboards
+ VIEW TRANSCRIPT
Hey everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. A while back I posted a simple number counter on Dribbble, and a bunch of you wanted to know how it was done, especially the speed variation of the number columns. So let me show you how you can achieve this in just a few minutes.
Your first task is to decide how many numbers will appear in the sequence. For this example, we’ll go with three. Grabbing my type tool, I’m going to type out the first sequence vertically, containing just one set of numbers from zero to 9. Once that’s done, I’ll duplicate the layer over to the right, then edit the layer to include a second set of numbers, which I can easily add with a copy and paste. Finally, the third set can be duplicated and edited just like the previous one.
Great. Now that we have our three columns, we obviously don’t want all the numbers visible – so we need to set up a mask. With the rectangle tool, I’m going to draw out a box overtop of the first row, leaving just a touch of room above and below. With that in place, I’ll select all the layers that make up this counter, then choose Mask with Shape under the Object menu. This will hide everything except what’s positioned within the rectangle we drew just a moment ago.
Now that the starting point is ready to go, let’s set up the ending point. I’ll duplicate this artboard by dragging it to the right with my Alt/Option key held down, then jump into the mask and select the first column. You can quickly select an individual element within a group, mask, or symbol by holding down your Command/CTRL key and clicking on the layer you need. For the first number, I’ll set it at 2. On to the second column, I’ll want to make sure to move past the first set of numbers. Let’s go with 6. Finally, the same for the third column, making sure to move it past the first two sets. 9 it is.
With all three numbers in place, it’s time to wire this up. In prototype mode, I’m going to select the entire artboard and drag the blue handle to the second. This will let me kick off the animation after a set duration, somewhere around 0.8 seconds. Under Action, I want to make sure Auto-Animate is selected, then for the easing, I’ll go with In-Out with a duration of 4 seconds.
Great, let see this in action. The play button at the top will launch the Desktop Preview, and after a short delay, the numbers spring into action, and depending on the scope of the project, I can wire the second artboard back to the first to create a looping animation.
And that’s all there is to it. You can do this with one number, 4, or as many as you need. I hope you all enjoyed this short tip and if you want to check it out for yourself, I uploaded an XD file on Dribbble for you all to download, and for more XD tips and tricks, definitely check out my other videos. I’ll see you soon.