Skip to main content

How to Use the Counter Element in Storydoc

The Counter is an animated element that makes numbers count up when your slide loads. Use it to showcase KPIs and results like revenue, customers, or conversion rates.

Jack avatar
Written by Jack
Updated over 3 weeks ago

Add a Counter to your slide

  1. Open your story in the editor.

  2. On the right toolbar, click Add element.

  3. In Add an animated element, choose Counter.

What you’ll see

A number block is added to the slide. When you select it, the top toolbar shows dedicated controls for Counter, Prefix/Suffix, and Animation.

Set the target number (the value it counts to)

  1. Select the counter element.

  2. In the top toolbar, click Counter.

  3. Enter the target value (the number you want the animation to reach).

    • For 120K, enter 120 here (you will add K as a suffix in the next step).

    • For 95%, enter 95 here.

    • For $50M, enter 50 here (you will add $ and M with prefix/suffix).

The animation always counts from 0 to your target value.

Add a prefix or suffix (currency, percent, units)

  1. With the counter still selected, click Prefix/Suffix in the toolbar.

  2. Fill Prefix for symbols before the number (for example, $).

  3. Fill Suffix for symbols after the number (for example, K, M, %).

  4. Toggle Disable comma if you do not want thousand separators (1,000 → 1000).

Quick examples

  • 120K → Counter: 120; Prefix/Suffix → Suffix: K

  • 95% → Counter: 95; Prefix/Suffix → Suffix: %

  • $50MPrefix/Suffix → Prefix: $; Counter: 50; Prefix/Suffix → Suffix: M

Each counter element has its own prefix and suffix. If your slide shows different formats (K, %, M), add one separate counter element for each metric.

Control the animation speed

  1. Select the counter element.

  2. Click Animation in the toolbar.

  3. Choose Slow, Medium, or Fast.

Style the counter (font, size, color)

  • Use the standard text tools in the top toolbar to change font, size, alignment, and color so the counter matches your brand.

  • Keep contrast high so the counting motion is readable.

Best practices

  • Keep it short. Pair each counter with a short label or line of context below it.

  • Choose readable speeds. Medium usually works best for comprehension.

  • Be consistent. Use the same format across a row of counters (all K or all M).

Did this answer your question?