A day on the scroll

Scroll, SVGGSAP, CSS onlyAdvancedCompressed weight: Demo 13 KBGSAP + ScrollTrigger 45 KBLenis 5.3 KBFreeDownload the zip

Scroll inside the preview

A whole day over the skyline of a drawn city: as you scroll the sky goes from dawn to night, the sun makes its arc and the moon rises, the shadows turn and lengthen, the windows light up one by one and a big clock counts the hours with rolling digits.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A day on the scroll</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scena>
    <div class="palco" data-palco>
      <!-- il cielo: tre colori che lo script fonde ora per ora -->
      <div class="cielo" data-cielo aria-hidden="true"></div>

      <!-- la città: lo script la disegna su misura dello schermo -->
      <svg class="citta" data-citta aria-hidden="true" focusable="false"></svg>

      <header class="testata">
        <p class="marchio">
          <svg class="marchio__segno" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M4 22a12 12 0 0 1 24 0" fill="none" stroke="currentColor" stroke-width="3"/><path d="M2 26h28" stroke="currentColor" stroke-width="3"/><path d="M16 4v4M6.5 8.5l2.8 2.8M25.5 8.5l-2.8 2.8" stroke="currentColor" stroke-width="3"/></svg>
          <span>Hotel Solstice</span>
        </p>
        <a class="prenota" href="#"><span class="prenota__fondo" aria-hidden="true"></span><span class="prenota__testo">Book a night</span></a>
      </header>

      <section class="racconto">
        <p class="orologio" data-orologio aria-live="off"></p>
        <div class="momento" data-momento aria-live="polite"></div>
      </section>

      <p class="cenno" data-cenno>Scroll through the day</p>
    </div>
  </main>

  <!-- i momenti della giornata: l'ora in cui comincia ciascuno, il nome e la riga -->
  <ul class="momenti" data-momenti hidden>
    <li data-ora="0" data-nome="Dawn">First light over Port Avalon. The rooftop pool opens for early swimmers.</li>
    <li data-ora="8.5" data-nome="Morning">Breakfast runs until eleven, with bread from the bakery downstairs.</li>
    <li data-ora="11.5" data-nome="Noon">High sun. Every room has blinds that close on their own.</li>
    <li data-ora="17.5" data-nome="Sunset">Golden hour at the Terrace Bar. Take the seat by the rail.</li>
    <li data-ora="20.5" data-nome="Night">The city switches on, window by window. Your bed is turned down at ten.</li>
  </ul>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.

41 values to change

Open the Playground

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 “A day on the scroll” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The page of a made-up hotel, Hotel Solstice, held on screen while you scroll: at the bottom the skyline of a city, with two rows of distant buildings in the haze, the front buildings with their windows, a street with lamps. The whole way down is one day, from 5:30 in the morning to 11:30 at night. The sky is a three-colour gradient that goes from night to dawn, morning, noon, sunset and night again; the sun rises on the left, makes its arc and sets behind the buildings, changing from orange to pale yellow; then a crescent moon rises from the right and small, still stars appear. The buildings’ shadows on the street turn with the sun: short at noon, long and slanted at dawn and sunset; on every building the side away from the sun darkens. At dusk the windows light up one after another (the light rises like a blind going up, with a small bounce), the street lamps switch on in a row and a few windows go dark before midnight; at dawn a few are still on. Clouds that change colour with the sky drift by, a flock in the morning and one at sunset. At the top a big clock counts the hours in five-minute steps: every digit that changes rolls away and the new one arrives with a bounce, backwards if you scroll up. At each moment of the day the hotel’s line changes, word by word, and the text turns from dark to light when the sky gets dark.

How it works

Scrolling is an hour

A single tween takes one number, the hour, from START_HOUR to END_HOUR while the scene goes from top to bottom (start top top, end bottom bottom, scrub 0.8). Everything else is computed from that number every frame, in one function: the sky, the sun, the shadows, the windows, the clock. Lenis smooths the scrolling and passes each step to ScrollTrigger.update.

The sky between five moments

The five skies (dawn, morning, noon, sunset, night) are three colours each: top, middle, horizon. Between them there are passages made by mixing the neighbours, and the blend follows a cosine curve, so the change has no jumps. The colours end up in three CSS variables of a linear-gradient; buildings, glass, street and clouds also take their colour from variables computed from the same sky.

A city sized to the screen

The SVG has a viewBox as big as the stage, so one unit is one pixel, and the city is drawn with a seeded random number generator: the same every time. On a phone the buildings are narrower and lower and the sun’s arc sits below the text. It is redrawn only if the width or the height changes a lot, not when Safari’s bar comes and goes.

Shadows that turn with the sun

All the shadows are a single path in a semi-transparent group, so where they overlap they do not get twice as dark. Each shadow starts at the base of its building and falls on the street: its tip moves away from the sun, more the lower the sun is, and gets longer as the sun goes down. The shaded side of each building is a dark rectangle whose opacity depends on where the sun is.

Windows, digits and lines

Every window that will light up has its own hour, in a row from dusk; when the hour passes it a scaleY tween with back.out starts, and going back it switches off. The clock digits are boxes with overflow: hidden: the old one leaves upwards, the new one comes in from below with a bounce (the other way when scrolling up). Each moment’s line is split into words that rise in a row.

Values to change

Name	File	Default	What it changes
`START_HOUR, END_HOUR`	script.js	`5.5, 23.5`	The hour at the top and at the bottom of the page, in hours and decimals: 5.5 is 5:30. END_HOUR goes up to 24, midnight.
`WINDOWS`	script.js	`120`	How many windows light up at dusk, one after another. The others stay dark.
`CLOUDS`	script.js	`6`	How many clouds cross the sky; 0 leaves it clear.
`SKY_DAWN, SKY_MORNING, SKY_NOON, SKY_SUNSET, SKY_NIGHT`	script.js	`#e79ea2, #a3d2f1, #73baee, #df727a, #121a47`	The five skies, three colours each: top, middle, horizon. The passages between them are made on their own.
`--palazzo-a … --palazzo-d, --palazzo-notte`	style.css	`#d8c7b0, #1a2048`	The front buildings’ daytime colours and the one they fade to at night.
`--luce-calda, --luce-chiara`	style.css	`#ffd27a, #ffe9b8`	The two colours of the lit windows and the street lamps.

Try them in the Playground

When to use it

To tell the passing of time: a hotel or holiday home, a weather or sleep app, a one-day event, a festival schedule, an “our day” page for a studio or a restaurant.

On phones

The same day with adapted sizes: narrower, lower buildings, smaller windows, a smaller full-width clock at the top and the sun’s and moon’s arc below the text, so they do not cross it.

With reduced motion

Nothing moves continuously: the day goes in steps, one moment at a time (dawn, morning, noon, sunset, night), and each change is a fade. Digits and lines change with a fade, the windows light up by fading in, the clouds stay still and the birds do not flap.

Pitfalls

A text colour halfway between dark and light can be read neither on a light sky nor on the dark: the text is dark or light, chosen by comparing the contrast of the two inks with the sky behind the words, and the switch takes a moment.
Shadows as many separate semi-transparent paths get twice as dark where they overlap: write them all in one path, inside a group that carries the opacity.
Rolling digits, with fast scrolling, change more often than their roll lasts: before a new one comes in, the ones still leaving are removed, or the box fills with digits.
Redrawing the city on every resize makes the scene jump on a phone, where Safari’s bar changes the height while scrolling: the stage is 100lvh tall and is redrawn only if the width changes, or the height by more than 120 pixels.
A colour in an SVG style changed every frame on hundreds of windows is slow: the glass uses fill: var(--vetro) and a single variable changes.

Libraries

GSAP 3.15.0, Lenis 1.3.26, Mona Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.

Testing

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