Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
A column that adds itself up
Scroll inside the preview
A small studio’s quarter as a column of figures aligned on the right: as you scroll, every line writes itself in and a copy of its figure drops down the column and sinks into the total as through a slot; the total counts up, gains weight and in the end is underlined twice and lights up in blue. Minimal style.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A column that adds itself up</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the quarter of a made-up ceramics studio, as a column of figures aligned on the right. Scrolling, every line is
written in, then a copy of its figure drops down the column and sinks through the rule into the total, which
counts up and gains weight. At the end the total is underlined twice and lights up -->
<main>
<section class="apertura">
<p class="piccolo">Wendle Ceramics</p>
<h1 class="titolo">The quarter,<br>added up.</h1>
<p class="piccolo piccolo--tenue">Five lines and a total. Scroll.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="marchio">Wendle</p>
<p class="piccolo piccolo--tenue">Third quarter, in euros</p>
</header>
<div class="conto" data-conto>
<div class="righe">
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Commissions</span></span><span class="riga__cifra" data-cifra>12,400.00</span></p>
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Workshops</span></span><span class="riga__cifra" data-cifra>3,180.50</span></p>
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Online shop</span></span><span class="riga__cifra" data-cifra>2,960.00</span></p>
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Gallery sales</span></span><span class="riga__cifra" data-cifra>5,215.75</span></p>
<p class="riga" data-riga><span class="riga__nome"><span data-nome>Licensing</span></span><span class="riga__cifra" data-cifra>845.00</span></p>
</div>
<div class="tratto" data-tratto aria-hidden="true"><i class="tratto__linea" data-linea></i></div>
<p class="totale">
<span class="totale__nome" data-totale-nome>Total</span>
<span class="totale__cifra" data-totale>0.00</span>
</p>
<div class="doppia" data-doppia aria-hidden="true"><i class="doppia__linea" data-sotto></i><i class="doppia__linea" data-sotto></i></div>
<div class="pozzo" data-pozzo aria-hidden="true"></div>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Every line<br>counted.</h2>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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.
32 values to change
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 “A column that adds itself up” from Animorio and fit it into my siteWhat it does
The third-quarter account of a made-up ceramics studio, Wendle, on a warm white with black ink and a single blue kept for the end. The screen stops: under a still empty column a thin rule draws itself from right to left, and under the rule the total waits at zero, thin and pale. Then, one line at a time, the name rises into place and the digits follow it from the right, one after the other, landing with a pixel of overshoot and taking on a little weight. A copy of the figure lifts a hair off the line, which turns pale, and drops down the empty column, narrowing as it speeds up, until it sinks into the rule as through a slot. The rule shivers with the blow, the total dips slightly and counts up to the new sum, and with every line added it gets heavier. When all five have arrived, two blue rules draw themselves under the total from right to left, one after the other, and the total lights up in blue with a last push of weight. The figures are tabular, so they stay in their column while they count. Everything follows the scroll, forwards and backwards.
How it works
The column
Each line is a flex paragraph: the name on the left, the figure on the right. The figures are read from the page, rounded to the DECIMALS shown (so the total is always the sum of what you see) and written again with toLocaleString. font-variant-numeric: tabular-nums gives every digit the same width: aligned on the right, the columns of units, tens and cents stay straight even while the total counts. The typeface is Archivo, variable in weight and width.
The digits rising
The script puts every character of the figure in a small window with overflow hidden. The name and the characters start at yPercent 110, below their window, and rise to 0: the name with power3.out, the digits with the LAND curve (a back.out, the pixel of overshoot) and a stagger of STAGGER that starts from the last one, that is from the right, the way figures are written in a column. Meanwhile the --w variable, which is the font-weight of the figure, goes from 260 to 430.
The copy and the slot
For every line there is a copy of its figure inside a well: a box in position absolute with overflow hidden that ends exactly on the rule above the total. The timeline does not move the copy: it moves numbers from 0 to 1 (lift, fall, sink) and a function redraws it. Falling with power2.in, the copy reaches the point where it touches the rule, measured with offsetTop; then it goes down by its whole height and the edge of the well cuts it, as if it went through a slot. While it speeds up, font-stretch goes from 100% to NARROW: the figure that runs gets narrower.
The total
When the copy touches the rule, three numbers of the same line start: conta, which with power3.out takes the text of the total to the new sum; peso, which with a back.out raises the font-weight from THIN towards BOLD in proportion to the share of the total already added; colpo, which pushes the total down a few pixels and makes the rule shiver with a dying sine. The rule is made of two elements: the outer one is moved by the script with the shiver, the inner one is drawn by GSAP with scaleX and transform-origin on the right.
The two rules and the blue
At the end two one-pixel rules, as wide as the final total (measured on a hidden copy already at its weight), draw themselves with scaleX from right to left, one after the other. The total goes from ink to blue with a fromTo and immediateRender: false (its colour was already moved at the first line) and gains 40 more weight with elastic.out. With reduced motion the lines fade in and the total steps from one sum to the next without counting.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
THIN | script.js | 200 | The weight of the total while it is still zero. |
BOLD | script.js | 720 | The weight it reaches when every line is added. |
NARROW | script.js | 68 | How narrow a figure gets while it falls (the width axis, from 62 to 100; 100 = it does not narrow). |
DECIMALS | script.js | 2 | How many decimals the figures show (0 for whole numbers). |
LAND | script.js | 'back.out(1.6)' | The curve of the digits landing in their line: the number in brackets is how far they overshoot. |
STAGGER | script.js | 0.08 | The delay between one digit and the next as they rise, in steps of the story. |
SCRUB | script.js | 0.6 | How many seconds the drawing takes to catch up with the scroll. |
When to use it
For a sum worth telling: the summary of an order or a quote, the quarter of a company on its site, the report of a fundraiser, the costs of a trip, the total of a subscription with its items. Lines and figures are changed in the page: it works with three to six lines and figures up to about ten characters.
On phones
The same: the column takes the full width minus the margins, the lines are a little smaller and the total is sized on the width of the screen, so the final total fits even at its heaviest.
With reduced motion
Nothing moves: the rule is already drawn, the lines fade in one after the other and the total jumps to the new sum with each one, without counting; at the end the two rules and the blue fade in.
Pitfalls
- Without tabular figures every step of the count changed the width of the total and, aligned on the right, the number wobbled on its left: it needs font-variant-numeric: tabular-nums and a typeface that has them (Archivo does).
- A small inline-block window with overflow hidden has its baseline on its bottom edge, not on the text’s: the digits shifted against the name. Here the windows have vertical-align: top, the name sits in the same kind of window with the same padding, and the line is aligned with flex-end.
- Rounding only the total, with DECIMALS at 0 the sum of 3,180.50 and 5,215.75 came out one euro more than the figures written above it: every line is rounded before adding.
- The rule shivers and GSAP draws it with scaleX: on the same element the script’s transform would have wiped out GSAP’s. The outer element shivers, the inner one is GSAP’s.
- The well that cuts the copies must start a little above the column: the copy of the first line, lifting a hair upwards, lost the top of its digits.
Libraries
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.2 KB; the libraries: GSAP + ScrollTrigger 45 KB.
Testing
Tested on 16 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
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.
