Keep scrolling
Transitions, Scroll
NewLifetime
Back to the library
The ring of spheres
Three glowing spheres scattered around a title: as you scroll the title blurs and the spheres swing together until they close into a ring, their names always upright; then the ring keeps turning by itself.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.
The code for this animation is part of lifetime access.
The preview stays open: watch it, slow it down, try it on your phone.
Lifetime accessWhat it does
On a night background three glowing spheres, apricot, wisteria and mint, are scattered around a title in a thin serif. As you scroll, the scene holds still: the title blurs, drops and fades, and the three spheres move together along an arc, each towards its place on a ring, shrinking, while the sheen inside each sphere turns on itself. When they arrive their names appear (Disegno, Codice, Movimento: drawing, code, motion), always upright, along with a thin ring with a word at its centre. After the scroll the ring keeps turning slowly by itself; scrolling back up, it rewinds.
How it works
Polar coordinates
Each sphere starts from a point around the title and the script turns it into an angle and a radius from the centre. The place on the ring is an angle every 120 degrees. On every update the angle is start + delta × e(t) + 2π × 0.6 × t, where delta is the shortest way to the place and e(t) is power2.inOut: the spheres converge while the group turns six tenths of a revolution.
A single number
The timeline, pinned and tied to scrolling for 2.2 screens, animates a plain object, { t: 0 → 1 }, and on every update places the three spheres with gsap.set: x and y from cosine and sine, scale from 1 to 0.6. Meanwhile the title goes to blur(16px), opacity 0 and y 90 in the first fifth; the names appear at 0.72, the ring at 0.8.
Names always upright
The spheres do not rotate: they move. Only the sheen inside turns, a blurred conic-gradient with mix-blend-mode: soft-light, rotating 300, 270 and 140 degrees during the scene. That way the names stay upright with no counter-rotation.
The orbit afterwards
When the scene reaches 97%, an endless tween adds 2π to the angle in 50 seconds. Going back below 90% the tween stops, the extra angle is brought back within half a turn and returns to zero in 0.4 seconds: the way back is always short.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
CORSA | script.js | 2.2 | How many screens of scrolling the scene lasts. |
GIRO | script.js | 0.6 | How many turns the group makes while the spheres go to the ring. |
ORBITA | script.js | 50 | Seconds for a full turn of the ring after the scene. |
--c1, --c2, --c3 | style.css | per sfera | The three colours of each sphere: the highlight, the body and the shaded edge. |
When to use it
To introduce three things that belong together, a method, three services, three values, at the top of a page: the title gives way to an image you remember.
On phones
The spheres start higher and lower, suited to a vertical screen, and the ring is larger relative to the width. The rest is the same: three elements, which a phone moves easily.
With reduced motion
No pinned scene: the spheres already sit on the ring with their names, the title sits above, and nothing turns.
Pitfalls
- Interpolating x and y in a straight line makes the spheres pass over each other: you need angle and radius, and for the angle the shortest way, or a sphere goes almost a full turn.
- The title is centred with translate(−50%, −50%): before animating y, hand it to GSAP as xPercent and yPercent, or its inline transform wipes the centring.
- An endless tween with +=2π and repeat −1 always restarts from the same angle: it is invisible only because 2π is a full turn.
- The turning sheen must sit inside a container with overflow: hidden and a round border, or the blurred conic-gradient spills out of the sphere.
Libraries
GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.
Weight: 11 KB of our own files.
Testing
Tested on 27 September 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.
