The drum counter

Transitions, TextGSAPEasyCompressed weight: Demo 5.8 KBGSAP 28 KBFreeDownload the zip

A loader that moves in jumps like a slot machine: every digit is a drum that spins to the new number, the progress follows what is really loading and never ends before a minimum duration.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en" class="carica">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The reel counter</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- il velo del caricamento: i rulli del contatore li costruisce lo script -->
  <div class="velo" data-velo aria-hidden="true">
    <p class="velo__lato velo__lato--sinistra">
      <span class="maschera"><span data-scritta>Cinema Lucciola</span></span>
      <span class="maschera"><span data-scritta>Summer season</span></span>
    </p>
    <p class="velo__lato velo__lato--destra">
      <span class="maschera"><span data-scritta>since</span></span>
      <span class="anni" data-anni></span>
    </p>
    <div class="contatore" data-contatore></div>
  </div>

  <main class="programma">
    <header class="programma__testa">
      <span class="programma__marchio">Cinema Lucciola</span>
      <span class="programma__quando">July, nightly at 9:30 pm</span>
    </header>
    <p class="nota" data-nota>The loader moves in jolts, like a slot machine: every digit is a reel that spins to its number. The button below runs it again.</p>
    <h1 class="programma__titolo" data-titolo>The July programme</h1>
    <ul class="film" data-film>
      <li><span class="film__giorno">3 July</span><span class="film__nome">The Lighthouse</span><span class="film__regia">by Nora Valli</span></li>
      <li><span class="film__giorno">10 July</span><span class="film__nome">Snow in July</span><span class="film__regia">by Pietro Galante</span></li>
      <li><span class="film__giorno">17 July</span><span class="film__nome">The Bees</span><span class="film__regia">by Irene Casali</span></li>
      <li><span class="film__giorno">24 July</span><span class="film__nome">The Last Train</span><span class="film__regia">by Clara Bensi</span></li>
      <li><span class="film__giorno">31 July</span><span class="film__nome">The Moon in the Well</span><span class="film__regia">by Aldo Ferri</span></li>
    </ul>
    <button class="rivedi" type="button" data-rivedi>
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.34-5.66" /><path d="M20 4v5h-5" /></svg>
      <span>Replay the loader</span>
    </button>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

50 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The drum counter” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The page arrives covered by a paper-coloured veil: at the bottom a huge counter in a serif face, at the top the name of the film season and, on the right, the years. The counter does not count one by one: it moves in jumps, and at each jump the digits spin like slot machine drums to the new number, the units with an extra turn. The numbers in between change on every load. Meanwhile the years on the right roll from 1998 to 2026. At a hundred the digits leave upwards, the labels follow and the veil lifts over the month’s programme.

How it works

The drum

Each digit is a window one line tall with a strip inside, the digits 0 to 9 repeated three times; one line of the middle copy is always shown. To spin to a digit the strip rises by what is missing plus the whole turns requested, with back.out(1.15) over 0.62 seconds and 0.06 of delay between drums; once the turn is done it quietly jumps back to the middle copy.

An honest progress

The progress is the smaller of what has really loaded (here the page’s two fonts) and the time divided by 2.6 seconds, the minimum duration; the number shown chases it at 7 per second. So it never ends before the minimum, and if the network is slow it waits.

The jumps

The jumps are set in advance: at 10% of progress and after 0.55 seconds a number between 12 and 24, at 45% and after 1.25 between 38 and 55, at 75% and after 1.9 between 66 and 84, at a hundred after 2.5. The hundreds drum widens into place only at a hundred. The years on the right spin one drum at a time, when that digit changes.

The exit

The drums rise by 1.15 em out of the counter’s mask, one after the other, the labels follow, and the veil lifts with a clip-path from inset(0) to inset(0 0 100% 0) over one second of expo.inOut; underneath, the title and the films come in.

Values to change

Name	File	Default	What it changes
`MINIMO`	script.js	`2.6`	The minimum loading duration, in seconds.
`INSEGUE`	script.js	`7`	How fast the number shown catches up with the real progress.
`SCATTI`	script.js	`4`	The thresholds, minimum times and ranges the numbers are drawn from.
`GIRO, SFASA`	script.js	`0.62, 0.06`	How long the drums spin and the delay between them.
`ANNI`	script.js	`1998, 2026`	The years rolling on the right.

Try them in the Playground

When to use it

For the loader of a site that really has something to load: an archive, a gallery, an image-heavy page, a cinema. The drum mechanism also suits any number that should change with some theatre.

On phones

The counter stays bottom left, smaller, and the years move under the name of the season.

With reduced motion

No loader: there is no veil and the page is there at once.

Pitfalls

To bring a digit in or out, do not move the strip, which would show the digit below: move the whole drum, inside a mask one digit tall.
If a new spin starts before the old one ends, the drum is left on the wrong copy: before each spin it is quietly set back on the starting digit of the first copy.
A counter counting one by one tied to real loading either runs too fast or sticks at 99: jumps with a minimum time and a soft chase keep the rhythm.

Libraries

GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.8 KB; the libraries: GSAP 28 KB.

Testing

Tested on 21 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.