Scroll stories

How to make numbers count up as visitors scroll

October 11, 2026
How to make numbers count up as visitors scroll

In TeleportHQ, numbers inside a Scroll Scene can count up from 0 to their value as visitors scroll. The quickest way is to add a Big number or Three numbers chapter, which comes with counting figures built in. Then set your own figure under Keyframes → Count up in the right panel. For numbers already on your page, ask the AI Assistant to make them count up.

Before you start

  • You need a Scroll Scene. Numbers only count up inside one. See How to create a scroll story with the Scroll Scene element.
  • The count-up shows whole numbers, written as plain digits. A sign or a short unit after the number stays as it is, for example 98%, 12+ or 40k. Numbers with separators or decimals, such as 1,200 or 4.5, can't count up.

Add a chapter with counting numbers

  1. On the canvas, click any element inside your scroll story. The Scene Timeline opens under the canvas. If it shows as a small Timeline · …% bar, click the bar.
  2. In the Scene Timeline's header, click + Chapter. The list of chapter templates opens.
  3. In the Prove it group, choose one:
    • Big number: one large number counting up, with a line under it. It counts to 250% until you change it.
    • Three numbers: three figures side by side that count up one after another (12x, 98% and 40k).
The TeleportHQ chapter template list opened from + Chapter on the Scene Timeline, with Big number and Three numbers highlighted in the Prove it group

The chapter is added at the end of your story and selected. You can also add it from the Chapters row of the scene's Scroll Scene section (the + button). See How to add, reorder and time chapters in a Scroll Scene.

Change the number it counts to

  1. On the Scene Timeline, click the small arrow at the left of the new chapter's row (for example Big number chapter) to show its rows.
  2. Click the row of the number. In a Big number chapter, it's called Number.
  3. In the right panel, find the Scroll Scene section. Scroll animation reads Custom (keyframes), and under Keyframes there's a Count up property with four Stops lines.
  4. In the last two lines, replace the value with your number in both. For example, change 250 to 120 twice.
The Scroll Scene section of the Number in a Big number chapter in TeleportHQ, with its Count up property and stops highlighted

The number counts from 0 up to your value. The first two lines keep it at 0 while the chapter comes in; leave them as they are.

To change the sign after the number, such as %, double-click it on the canvas and type, for example +. Edit the line under the number the same way.

Make numbers already on your page count up (AI Assistant)

If your scroll story already shows figures as text, such as 14 years in one text and 98% in another, ask the TeleportHQ AI Assistant:

  1. Open the AI Assistant.
  2. Type what you want, for example: Make the numbers 14, 98% and 40k in the hero scroll story count up.
  3. Send it. The assistant turns each figure into a count-up. Whatever follows the number, such as %, stays as text.

Each number starts counting once it has arrived on screen. To stop it, ask: Stop the count-up on those numbers. They show as plain text again. See How to edit your website by chatting with the AI Assistant.

Check that it worked

On the canvas, drag Editing position in the Scroll Scene section, or click ▶ next to it: the number counts up as the story plays. To see it with real scrolling, click Preview in the bottom toolbar. See How to preview your site before publishing.

Troubleshooting

The number shows twice, for example 9898% The Count up property was added to a text that still holds the number. The count-up draws its number in front of the text. Remove the number from the text and keep only what follows it, such as %. Or ask the AI Assistant to make the number count up: it makes both changes for you.

The AI Assistant says a number can't count up The text doesn't start with a whole number, uses separators or decimals, starts with a zero (such as 05), or isn't inside a Scroll Scene. Write the figure as plain digits, for example 1200+ instead of 1,200+.

The number ends on a different value than the one you typed The last two Stops lines hold different numbers. Type your number in both.

Good to know

Share

Related Articles

How to add, reorder and time chapters in a Scroll Scene

In TeleportHQ, select a Scroll Scene and click + in the Chapters row of the right panel (or + Chapter in the Scene Timeline) to add a chapter from 24 templates; drag a chapter's row in the Scene Timeline or the layers tree to reorder it, and click Re-deal evenly to give every chapter an equal share of the story again.

How to animate an element as visitors scroll through a scene

In TeleportHQ, select any element inside a Scroll Scene and choose a Scroll animation in the right panel's Scroll Scene section, such as Rise in or Parallax, or choose Custom (keyframes) to decide what changes, when and by how much, so the element moves with the visitor's scroll.

How to edit a Scroll Scene on the Scene Timeline

In TeleportHQ, select a Scroll Scene or anything inside it and the Scene Timeline opens under the canvas, with one row per chapter; play or scrub the story with its playhead, open a chapter to see what moves inside it, drag bars to change when things play, and reorder chapters by dragging their rows.

How to edit your website by chatting with the AI Assistant

In the TeleportHQ editor, click AI Assistant above the canvas, select the element you want to change, type what you want in plain words and press Enter, and the assistant applies the change to your page.

What do visitors who turn on reduced motion see?

TeleportHQ sites respect the "reduce motion" setting of a visitor's device automatically; Motion animations show the content in place without moving, rows that slide by themselves stand still and can be swiped, page transitions become instant, and each Scroll Scene and Scroll Video shows what you choose in its Reduced motion setting.