The wrecking-ball logo
Intro, Physics, SVG, Text
NewFree
Back to the library
Weight in the hourglass
A minimal-style text animation: two words, “heavy” above and “light” below, with a hairline hourglass in between. The letters’ weight runs down like sand: the top ones empty from the middle outwards, an orange thread falls and the bottom ones fill and settle. Then the hourglass turns over with everything else and it starts again.
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>Weight in the hourglass</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>
<main class="stage" aria-label="heavy, light">
<!-- the hourglass: two hairline bulbs, the sand and the thin stream, drawn by the script -->
<svg class="glass" data-glass aria-hidden="true">
<g data-turn>
<path class="sand" data-sand-a d="" />
<path class="sand" data-sand-b d="" />
<path class="bulbs" data-bulbs d="" />
<path class="caps" data-caps d="" />
</g>
<path class="stream" data-stream d="" />
</svg>
<!-- the two words: the weight drains from one into the other -->
<p class="word" data-word-a aria-hidden="true"></p>
<p class="word" data-word-b aria-hidden="true"></p>
</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.
12 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 “Weight in the hourglass” from Animorio and fit it into my siteWhat it does
On a black background there are two words one above the other, and between them an hourglass drawn with two triangles of thin grey lines, closed top and bottom by two light rules. The top word, “heavy”, is very black and wide; the bottom one, “light”, very thin and narrow. The top bulb holds orange sand. The sand starts to run: its surface sinks in the middle, an orange thread falls from the neck to the bottom and a small heap grows there. Meanwhile the letters of “heavy” empty from the middle outwards, turning thin and narrow, and those of “light” fill in the same order, a moment later, widening and gaining weight; every full letter settles with a small squash and springs back. When all the sand has run through, the thread lets go and falls. After a pause the hourglass turns over: everything flips around the centre like a page being turned, the words squash down to a line and swap places without ever going upside down, the hourglass stops with a wobble and the words feel the knock. Now “light” is on top, full, and the sand runs again: it empties and “heavy” fills. One more turn and everything is as it was at the start.
How it works
Weight as a quantity
Every letter has a number from 0 to 1, its share of weight: at 1 it is full (Archivo at wght 900, wdth 114), at 0 empty (wght 110, wdth 74). GSAP moves only these numbers, from the middle of the word outwards, and the sand in each bulb is the average of its word’s letters: what you see in the hourglass and what you read in the words are the same thing.
Sand with real geometry
The bulbs are triangles, so the sand resting on the neck rises with the square root of the amount (the area grows with the square of the height) and the sand on the bottom with 1 minus the root of 1 minus the amount. The top surface sinks in the middle with a quadratic curve as the sand runs; the bottom one forms a heap that is tallest half way and flat at the end.
The thread
The falling thread is a line with a head and a tail, both from 0 (the neck) to 1 (the sand below): at the start the head runs, at the end the tail, so the thread lets go and falls instead of vanishing.
A turn like a page
The hourglass and the words live in a world squashed in height by the cosine of an angle: from 0 to pi everything goes through a line and turns over, and the words swap places. The words use the absolute value of the cosine, though, so they stay upright. Which bulb is on top is decided by the sign of the cosine: the sand changes where it rests exactly when everything is flat and nothing can be seen.
The settle
At the end of the turn the hourglass rotates two degrees and comes back with an elastic.out, and the words’ distance from the centre grows by 3.5% and comes back: the knock of the hourglass landing on the table.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD_TOP | script.js | 'heavy' | The word that starts on top, full (up to 9 letters). |
WORD_BOTTOM | script.js | 'light' | The word that starts at the bottom, empty (up to 9 letters). |
FLOW | script.js | 2.8 | Seconds the weight takes to pass from one word to the other. |
FLIP | script.js | 1.1 | Seconds the hourglass takes to turn over. |
HEAVY | script.js | 900 | The weight of a full letter (100 to 900). |
LIGHT | script.js | 110 | The weight of an empty letter (100 to 900). |
WIDTH | script.js | true | Full letters are also wider (wdth axis), empty ones narrower. |
PAUSE | script.js | 0.9 | Seconds of pause before every turn. |
When to use it
To say that time is passing or that something is getting ready: a countdown before a launch or an event, a limited-time offer page, a loading screen, a type portfolio showing a variable font’s axes, a site about weights and measures.
On phones
The same animation with the sizes adapted: the words fill almost the whole width, the hourglass is at most a tenth of the screen tall and between it and the words there is room for the letters that go below the line.
With reduced motion
Nothing moves: the two words and the hourglass with the sand on top fade in and stay still.
Pitfalls
- With the wdth axis a full word is much wider than an empty one: choosing the size on the words as they are at the start, full “light” would run off the screen. Both words are measured completely full and the size is chosen on the wider one.
- Squashed with the real cosine, after the turn the words would read upside down. They use the absolute value, so they squash down to a line and open up again upright on the other side.
- After the turn the sand in the bulb now at the bottom must rest on the base, no longer on the neck: which bulb is on top is decided by the sign of the cosine, and the sand changes where it rests in the instant everything is flat, when it cannot be seen.
- On a phone the tail of the “y” in “heavy” almost touched the hourglass: the words’ distance from the centre grew from 0.62 to 0.74 times the font size.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.1 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 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.
