The mark that becomes a map
3D, Intro
NewFree
Back to the library
The gyroscope rings
A logo intro in the minimal style, for a made-up instrument maker: three thin rings with a degree scale, one inside the other as in a gyroscope, spin in 3D on their axes and come to rest one after the other facing you, each passing by a whisker, while the ring around it feels the knock. When they all rest a vermilion tick lights up and the name, «Axial», lands in the middle letter by letter.
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 gyroscope rings</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 opening of a made-up maker of instruments: three hairline rings, one inside the other like a gimbal, spin
on their axes and come to rest one after the other, facing you, as three circles with a degree scale. Then the
name lands in the middle. A click sets them spinning again. The script builds the rings and turns them -->
<main class="stage" data-stage>
<div class="scene" data-scene aria-hidden="true">
<div class="gimbal" data-gimbal>
<div class="ring" data-ring>
<svg class="ring__face" viewBox="0 0 200 200"></svg>
<div class="ring" data-ring>
<svg class="ring__face" viewBox="0 0 200 200"></svg>
<div class="ring" data-ring>
<svg class="ring__face" viewBox="0 0 200 200"></svg>
</div>
</div>
</div>
</div>
</div>
<h1 class="name" data-name>Axial</h1>
<p class="under" data-under>Instruments</p>
<button class="again" type="button" data-again data-autoclic>Spin again</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.
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 gyroscope rings” from Animorio and fit it into my siteWhat it does
On warm white paper three thin rings come in spinning, one inside the other: each is a band between two circles with a tick every five degrees, longer every thirty, and two short pins on the axis it turns about, tying it to the ring around it. The outer one turns about the vertical axis, the middle one about the horizontal axis inside it, the inner one about the vertical again: in 3D you see crossing ellipses. They slow down and come to rest one after the other facing you, first the outer, then the middle, then the inner: each goes a couple of degrees past flat and settles, and the ring holding it feels the knock and sways a little. When they all rest they are three concentric circles with their scale; the tick at the top of the inner ring and its pin light up in vermilion, and the letters of «AXIAL» land in the middle one after the other, rising a little, taking weight and narrowing on the width axis. «Instruments» appears below. After a few seconds the letters go, the rings start spinning again, the inner one first, and it all starts over. The pointer tilts the whole gyroscope a little; «Spin again» restarts it at once.
How it works
Three rings one inside the other
Every ring is an element with transform-style: preserve-3d that holds its SVG drawing and the next ring: so the inner ring turns inside the middle one, which turns inside the outer one, as in a real gyroscope. The axes are rotationY, rotationX and rotationY again, and each is set with GSAP on its own element, while the drawing sits in the child.
The drawing of a ring
The script draws every ring in real pixels at every resize: two circles a band apart, seventy-two ticks (longer every thirty degrees) and two pins on the axis it turns about, reaching the inner edge of the ring around it. The lines are one pixel wide, and the tick at the top of the inner ring with its pin has the class of the accent.
Slowing down and settling
Every ring starts SPINS and a half turns back and arrives OVERSHOOT degrees past flat with a power3.out, which starts fast and brakes; then it goes back to zero with an elastic.out(1, 0.38). The rings arrive staggered by STAGGER, and when one settles the ring holding it gives a knock of less than half the degrees and comes back with another elastic.
The name
Every letter of the name is a span whose font-variation-settings are tied to two CSS variables, --w for the weight and --d for the width of Archivo. GSAP takes them from 200 and 125 to WEIGHT and 100 while the letter rises with a back.out, staggered by 0.07 s: the letter lands, takes weight and narrows.
The round
Everything is a GSAP timeline that starts over by itself at the end: the letters go, the rings pick up speed with a power2.in starting from the inner one, and they go round again. The pointer tilts the element holding the three rings with two gsap.quickTo.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'Axial' | The name that lands in the middle. |
UNDER | script.js | 'Instruments' | The small line under the name. |
SPINS | script.js | 2.5 | How many turns the rings make before they rest. |
LAND | script.js | 1.6 | The seconds the outer ring takes to come to rest. |
STAGGER | script.js | 0.5 | The seconds between one ring resting and the next. |
OVERSHOOT | script.js | 2 | How many degrees a ring goes past flat before it settles. |
HOLD | script.js | 3.5 | The seconds everything rests before the rings spin up again. |
SIZE | script.js | 0.66 | The outer ring, as a share of the height of the page. |
WEIGHT | script.js | 640 | The weight the letters take, from 300 to 900. |
When to use it
For the opening of the site of a watch brand, a maker of precision instruments, compasses or optics, an engineering studio or a navigation app: the gyroscope coming level says precision, and then gives way to the name.
On phones
The same three rings, almost as wide as the screen, with the same turns and the same knocks; «Spin again» is tapped with a finger. Without a pointer the gyroscope does not tilt.
With reduced motion
Nothing spins: the rings fade in already at rest facing you, with the tick lit, and the name appears already at its weight.
Pitfalls
- The accent tick, as short as the others, disappeared under the pin of the ring: now it crosses the whole band and the pin lights up too, and it shows at first glance.
- Measured on the shorter side of the page, on a phone the rings stayed small and left half the screen empty: the size is the smaller of 88% of the width and the chosen share of the height.
Libraries
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 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.
