The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The clock dial menu
A minimal-style text animation: a fashion photographer’s menu sits on the face of a clock. The words turn on an ellipse, the one in front gains weight, the others fade lighter and vanish behind the horizon; at every step the minute hand makes a full turn. On arrival the dial moves closer and runs through the categories, then it becomes the menu. Remade from scratch from an idea on Meech213.
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>The clock dial menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="brand">Velure</span>
<span class="what">Photography and film</span>
</header>
<!-- the dial: words on an ellipse, a hairline horizon, ticks and two clock hands; the script places everything -->
<nav class="dial" data-dial aria-label="Menu">
<svg class="rim" data-rim aria-hidden="true"></svg>
<ul class="items" data-items role="list"></ul>
<div class="clock" aria-hidden="true">
<span class="hand hand--hour" data-hour></span>
<span class="hand hand--minute" data-minute></span>
<span class="pin" data-pin></span>
</div>
</nav>
<p class="hint" aria-hidden="true">Click a word to turn the dial</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.
16 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 “The clock dial menu” from Animorio and fit it into my siteWhat it does
A warm white page with, small at the top, the name of the invented studio, Velure, and on the right Photography and film. In the middle a clock face drawn in hairlines: an ellipse of ticks, a faint horizon line, two one-pixel hands and a vermilion pin. The words stand on the edge of the dial, in capitals, in a variable serif: the one at the top right is in front, black, fuller and with a soft shadow; its neighbours are paler and lighter; the ones that go round under the horizon fade out. On arrival the dial appears and moves closer, grown one and a half times from the bottom, and runs through the categories of the work, Editorial, Beauty, Campaigns, Portraits, Music: at every step the wheel turns by one word and the minute hand makes a full turn while the hour hand moves on an hour. Then it comes home, moves back, the categories go out one after the other and the pages light up in their place, Index, Work, Films, About, Book. A click on a word brings it in front with the same clock turn, forwards or backwards along the shorter way; if nobody clicks, the menu visits two pages, goes back to Index, fades and starts again.
How it works
An ellipse and three numbers
The dial is a box twice as wide as it is tall. The centre of the ellipse is at half the width and at 84 per cent of the height, the radii are 38 per cent of the width and 52 of the height: so the words at the top stay inside the box and the ones at the bottom end up under the horizon. Everything that moves depends on three numbers, the rotation, the zoom and how visible it is, which GSAP animates; a single function on GSAP's ticker puts every word, every tick and the hands in place with sine and cosine.
In front, at the sides, behind
The list of pages goes round the dial twice, like the numbers on a clock: with five pages there are ten places, 36 degrees apart. The place in front is at minus 45 degrees, top right. For every word the distance from that place, softened with smoothstep, sets the weight (from LIGHT to HEAVY), the optical size, the scale and the shadow; the sine of the angle says whether it is above or below the horizon, and below it the opacity drops to a tenth and then to zero.
The clock turn
To bring a page in front the script looks for the rotation closest to the current one that puts it in the front place, so the wheel always takes the shorter way, forwards or backwards. The tween lasts 1.18 seconds with power4.inOut. The hands have no tween of their own: they are worked out from the rotation, a full turn of the minutes and an hour of the hours for every word, so they start, brake and stop with the wheel.
The intro and the menu
On arrival the dial grows to 1.5 in 0.82 seconds, with its origin at the bottom, and takes a step every 0.87 seconds through the categories; then it goes back to the first page and to zoom 1 in 0.93 seconds, the category labels go out in 0.24 seconds one every 0.018 and the pages light up in 0.52 one every 0.04. The zoom stops earlier if the widest word would leave the screen. If nobody clicks, a new timeline visits two pages, goes back to the first, fades and starts again; every click stops the one running and builds a new one from where the wheel is.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PAGES | script.js | 'Index, Work, Films, About, Book' | The pages of the menu, separated by commas, three to six. |
CATEGORIES | script.js | 'Editorial, Beauty, Campaigns, Portraits, Music' | The categories the intro runs through, one per page. |
STEP_TIME | script.js | 1.18 | The seconds the dial takes to bring the clicked word in front. |
INTRO_STEP | script.js | 0.87 | The seconds of every step while the intro runs through the categories. |
ZOOM | script.js | 1.5 | How much the dial grows during the intro (it stays smaller if the screen is narrow). |
PAUSE | script.js | 1.4 | The seconds the menu rests on a page before the next one, when nobody clicks. |
LIGHT | script.js | 250 | The weight of the words at the sides (100 to 900). |
HEAVY | script.js | 560 | The weight of the word in front (100 to 900). |
When to use it
For the menu of a site that lives on images and wants a navigation that is a gesture in itself: a photographer, a fashion studio, a director, a magazine, an archive with a few sections. It works well as an opening that shows the categories and then stays on as the menu.
On phones
The same animation with the sizes adapted: the dial takes the width of the screen and its height into account, the type shrinks with it and the intro zoom stops where the widest word would touch the edge. A tap on a word turns the dial.
With reduced motion
Nothing turns and nothing grows: at every step the dial fades out and back in with the new word in front, and the categories give way to the pages with a fade.
Pitfalls
- With the list going round only once, five words 72 degrees apart, the ones next to the front place were too far away and the dial looked empty: the list goes round twice, like the numbers on a clock, and every word has its double on the other side.
- With the 1.5 zoom on a phone the words at the sides left the screen: the zoom is worked out from the widest word, measured once the font has arrived, and from the strip at the top with the studio's name.
- One tween for the hands and one for the wheel, started together, drifted apart as soon as a click interrupted the turn: the hands are worked out from the rotation and have no tween of their own.
- A click halfway through the intro left the categories on: the click turns the categories off, the pages on and the zoom back to 1 before turning.
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.9 KB; the libraries: GSAP 28 KB.
Testing
Tested on 22 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.
