Skip to main content

Create a counter animation

Make a polished counting animation in just a few clicks

Use Jitter's dynamic counting animation preset to display numbers, stats or metrics with motion.

To create a counter animation:

  1. Create a text layer that contains the number you want to animate

  2. Open the Animate panel

  3. Select New animation → Custom → Counter

  4. Configure the animation values:

    1. From: the value the counter begins at

    2. To: the value it counts up (or down) to

    3. Step: the interval it counts at. This controls the pace of the animation.

💡 Tip: Choose more steps to make the counting animation smoother and slower, and fewer steps to make it snappier.

Supported number formats

The counter animation works with a wide range of number formats, including text layers that mix numbers with other characters:

  • Plain numbers, e.g. 42, 1234.5678

  • Negative numbers, e.g. -1,234.5%

  • Non-numeric prefixes and suffixes, e.g. $42, 42kg, $1,234.50kg

  • Thousands separators e.g. comma (1,234), dot (1.234), or space (1 000 000)

  • Decimals with . as decimal separator

  • Leading zero padding, e.g. 0000, 001,234.50

Troubleshooting if the Counter option is unavailable

If the counter option is not visible in the custom animations menu, check for the following:

  • No recognizable numeric value: The text layer must contain a clear numeric value. If the text does not include numbers or includes unrecognizable formats (refer to the supported formats above), the Counter option will not appear. Reformat your number and try opening the custom animation menu again.

  • Non-text layer Selected: Counter animations are only available for text layers. Check that your layer is not a shape, SVG or image.

Did this answer your question?

Related Articles