Projects in a row with a ring

A pinned scene where projects go by one at a time: the current one big in the centre, its neighbours small above and below, and a ring filling towards the next.

Scroll, Images, TextGSAPMediumLifetime

Scroll inside the preview

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

/* Progetti in fila con l'anello
   La scena resta ferma per tanti schermi quanti sono i progetti. Il progetto corrente è grande al centro;
   il precedente sale piccolo e sbiadito, il successivo aspetta sotto. A ogni cambio le carte scivolano al
   loro posto, nome e descrizione si riscrivono parola per parola e il fondo sfocato si dà il cambio.
   L'anello si riempie mentre ti avvicini al progetto dopo: dice quanto manca, senza numeri. */
gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const STRETTO = matchMedia('(max-width: 800px)').matches;
const SALTO = STRETTO ? 0.28 : 0.36;   /* distanza delle carte vicine dal centro, in frazione dell'altezza */
const PICCOLE = 0.34;                  /* scala delle carte vicine */
const DURATA = 0.7;                    /* secondi per ogni cambio */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const corsa = document.querySelector('.corsa');
const carte = [...document.querySelectorAll('.carta')];
const nome = document.querySelector('.nome');
const descrizione = document.querySelector('.descrizione');
const strati = [...document.querySelectorAll('.fondo__strato')];
const pieno = document.querySelector('.anello__pieno');
const N = carte.length;
const d = RIDOTTO ? 0 : DURATA;
const GIRO = 2 * Math.PI * 35;
pieno.style.strokeDasharray = GIRO;
pieno.style.strokeDashoffset = GIRO;

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 access

What it does

The work section stops on screen. The current project sits in the centre, large; the previous one has gone up, small and faded, the next one waits below. As you scroll, with every new project the cards slide one place, the name and description are rewritten word by word, and behind everything the blurred background takes on the project's colours. At the bottom right a ring fills up as you approach the next project, and starts empty again when you get there.

How it works

One scene for many screens

ScrollTrigger pins the section for N screen heights (one per project). In onUpdate, progress times N gives a number like 2.4: the integer part is the current project, the decimal part is how far the next one is.

Every card's place

A posto(r) function says where a card sits at distance r from the current one: r = 0 centred and full, r = ±1 small and faded above or below, further away almost invisible. On change every card goes to its place with power3.out and overwrite, so fast changes do not pile up.

A ring with no numbers

An SVG circle with stroke-dasharray equal to the circumference (2π times 35); stroke-dashoffset follows the decimal part of the progress. It says how much is left without counting the projects.

Changing texts and background

Name and description are rewritten into spans, one word each, and rise staggered. The background is two heavily blurred layers taking turns: one lights up with the new project while the other fades.

Values to change

Name	File	Default	What it changes
`SALTO`	script.js	`0.36 (0.28 sul telefono)`	How far from the centre the neighbouring cards sit, as a fraction of the scene's height.
`PICCOLE`	script.js	`0.34`	The scale of the neighbouring cards.
`DURATA`	script.js	`0.7`	Seconds for each change: cards, words and background.
`data-nome / data-testo`	index.html	`cinque progetti`	Name and description of every project, written on its card.

When to use it

To show three to seven pieces of work calmly, one at a time, when each deserves its moment. With many projects the run gets long: a grid is better.

On phones

The text moves to the top and the cards below, wider; the gap between cards shrinks so they do not touch the text.

With reduced motion

The scene stays pinned but the changes are instant: no sliding, no rising words.

Pitfalls

Do not start an animation on every onUpdate: check that the project really changed, or you create dozens of tweens per second.
Use overwrite: true on the cards: when scrolling fast the project changes before the card arrives, and without overwriting the tweens fight each other.
Keep the progress below N with a margin (here N - 0.0001): at progress 1 the integer part would become N and you would look for a card that does not exist.
The blur filter on the background is expensive: put it on two still layers and animate only their opacity, never the blur.

Libraries

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 11 KB of our own files.

Testing

Tested on 26 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.

From the same family

The hour that covers the photo

Scroll, Images, Text

NewLifetime

Standing letters with a long shadow

Text, Scroll, 3D

NewFree

Words that melt into each other

Text, Scroll, SVG