The strip of rooms that opens

Transitions, Images, TextGSAP, CSS onlyMediumCompressed weight: Demo 8.1 KBGSAP + SplitText 31 KBFreeDownload the zip

The opening of an interior studio: fourteen little rooms in two staggered rows join in a strip, the strip folds pair by pair into the little square in the middle, and that square becomes the room that fills the screen.

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>The strip of rooms that opens</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/400-italic.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-condensed@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of a made-up interior studio. Fourteen small rooms in two staggered rows meet in a single strip, the
       strip folds into the square in the middle, and that square grows into the room that fills the screen -->
  <header class="testata" data-testata>
    <button class="testata__voce" type="button">Menu</button>
    <p class="marchio">
      <svg class="marchio__segno" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 2h12v4H4zM2 8h16v4H2zM4 14h12v4H4z" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
      <span>LUMBRE</span>
    </p>
    <button class="testata__voce testata__voce--bordo" type="button">Book a visit</button>
  </header>

  <div class="velo" data-velo aria-hidden="true"></div>

  <main class="eroe">
    <figure class="eroe__stanza" data-eroe><div class="eroe__quadro" data-quadro></div></figure>
    <div class="eroe__testi" data-eroe-testi>
      <p class="eroe__motto">Plan <i>&times;</i> Light <i>&times;</i> Build</p>
      <h1 class="eroe__titolo" data-eroe-titolo>Every room is<br>one long sentence.</h1>
    </div>
  </main>

  <div class="caricamento" data-caricamento aria-hidden="true">
    <p class="marchio caricamento__marchio" data-marchio>
      <svg class="marchio__segno" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 2h12v4H4zM2 8h16v4H2zM4 14h12v4H4z" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
      <span>LUMBRE</span>
    </p>
    <p class="caricamento__motto" data-motto>Plan <i>&times;</i> Light <i>&times;</i> Build</p>
    <div class="striscia" data-striscia></div>
    <div class="caricamento__testi">
      <p class="caricamento__titolo" data-titolo>Rooms that read as one.</p>
      <p class="caricamento__sotto" data-sotto>Homes planned, lit and built as a single whole.</p>
    </div>
  </div>

  <button class="ancora" type="button" data-ancora>Play it again</button>

  <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/SplitText.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.

46 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 “The strip of rooms that opens” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The opening of Lumbre, a made-up interior studio. On a cream ground with soft vertical bands there are the logo, a line in italics that writes itself from the left and, in the middle, fourteen drawn little rooms, seven above and seven below like the squares of a chessboard. Meanwhile, underneath, the line «Rooms that read as one.» rises letter by letter. After a second the two rows slide towards each other and become a single strip; then the strip folds towards the middle, in pairs, from the two outermost rooms to the nearest, and the first two pairs fade on the way. The line leaves from its last letter. The little square in the middle is left: it opens into a landscape picture, the room inside comes a little closer, the cream ground disappears and the picture grows until it fills the screen. The page title rises over it and the header comes back. After a few seconds it starts again, or you press «Play it again».

How it works

Fifteen squares

The step from one little room to the next is SLOT hundredths of the screen width and each room is TILE wide: they are fifteen squares in a row, and the middle one is not a little room but the room of the page, already in place and small. The others go left and right with x, every other one a little higher or lower by SPLIT, so they look like two staggered rows.

The rows and the fold

After DELAY seconds the two rows go to y: 0 in ROWS_TIME seconds with power2.out, the second seven hundredths later. At FOLD_AT the fold starts: each room goes to x: 0, that is over the middle square, in FOLD_TIME seconds, one every FOLD_STAGGER starting from the outermost pair; the first FADE_PAIRS pairs fade meanwhile. The room of the page sits above the others, so the little rooms slide under it.

The room that opens

At 1.9 seconds the little rooms fade in a quarter of a second and the cream ground goes. The room of the page goes from the little square to a picture OPEN_W by OPEN_H hundredths of the width in 0.77 seconds; the drawing inside comes closer up to ZOOM in 1.55 seconds; at 2.68 the picture grows as big as the screen in 0.76 seconds. The drawing is an SVG with preserveAspectRatio set to slice: as the frame grows, more of it shows.

The letters

SplitText splits the loader line into letters and the subtitle into words. They rise at once, from 20% of their height and transparent, in 1.5 seconds with power2.out, one every CHAR_STAGGER; at 1.53 they leave the other way, from the last, in 0.7 seconds. At 2.76 the page title rises the same way, and at 3.76 the header comes back.

On a phone, and again

Below 768 pixels the numbers in PHONE apply: rooms of 12 hundredths, three pairs, rows at 6.25, a picture of 60 by 45 and a room that comes only slightly closer; no wait at the start and power2.inOut curves, a little slower. Once the opening is over, after HOLD seconds a gsap.delayedCall plays it again; when the screen width changes, everything is redone with the new measures.

Values to change

Name	File	Default	What it changes
`DELAY`	script.js	`1`	The seconds before the strip moves (1 on the site).
`TILE`	script.js	`4`	The side of each little room, in hundredths of the width (4 on the site).
`SLOT`	script.js	`4.4`	The step from one room to the next (4.4 on the site).
`SPLIT`	script.js	`2.2`	How far each row starts from the middle line (2.2 on the site).
`FOLD_AT`	script.js	`1.05`	When the fold starts, in seconds (1.05 on the site).
`FOLD_STAGGER`	script.js	`0.02`	The gap between one room and the next in the fold (0.02 on the site).
`OPEN_W`	script.js	`42`	The width of the picture after the first step (42 by 28 on the site).
`ZOOM`	script.js	`1.25`	How much the room in the picture comes closer (1.25 on the site).
`HOLD`	script.js	`2.6`	The seconds of pause before starting again; 0 for once only.

Try them in the Playground

When to use it

For the opening of the site of a studio, a photographer, a hotel or an estate agency: someone with many pictures and one that sums them up. Once per visit, on the home page.

On phones

The same, with the site’s phone measures: three pairs of larger rooms, rows further apart, a picture of 60 by 45 and slightly slower steps, with no wait at the start.

With reduced motion

The page is already open: no strip, the room fills the screen and the title and the header fade in.

Pitfalls

The room of the page must sit above the little rooms, not under them: the folded rooms all end up on top of each other, and if they were above they would cover the picture as it opens.
Measures in hundredths of the screen must be turned into pixels before giving them to GSAP and redone when the width changes: x accepts vw, but the width and height of the growing pieces must be worked out.
SplitText must run after document.fonts.ready: with the fallback font the letters split in the wrong places and stay out of line when the real font arrives.
The drawing of the room must be planned for the tall phone screen: with slice only a slice in the middle shows, so sofa, lamp and window must be near the centre.

Libraries

GSAP 3.15.0, SplitText (GSAP) 3.15.0, Instrument Serif 5.3.0, Roboto Condensed (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 8.1 KB; the libraries: GSAP + SplitText 31 KB.

Testing

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