The frames of the apartment

Scroll, Images, TransitionsGSAP, CSS onlyMediumCompressed weight: Demo 7.7 KBGSAP + ScrollTrigger 45 KBFreeDownload the zip

Scroll inside the preview

As you scroll, a row of cream bars pulls back like the teeth of a comb, then the picture of a home grows to the whole screen while two green frames grow faster around it; halfway through, the homes start changing on their own.

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 frames of the apartment</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-variable/roboto-condensed@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the projects of a made-up interior studio. Scrolling, a row of cream bars pulls back from the green, the picture
       of a home grows from small to the whole screen, and two green frames grow faster around it, like rooms opening
       one inside the other. When the picture is big enough, the homes start changing on their own -->
  <main>
    <section class="apertura">
      <p class="etichetta">Selected homes</p>
      <h1 class="apertura__titolo">Five rooms,<br>one quiet idea.</h1>
      <p class="apertura__testo">Each home is drawn around how it will be lived in, then finished down to the last hinge. Scroll to step inside.</p>
    </section>

    <section class="case" data-case>
      <div class="scacchi" data-scacchi aria-hidden="true"></div>
      <div class="palco">
        <div class="cornice cornice--lontana" data-cornice="lontana" aria-hidden="true"></div>
        <div class="cornice cornice--vicina" data-cornice="vicina" aria-hidden="true"></div>

        <div class="vetrina" data-vetrina>
          <article class="casa" data-casa>
            <div class="casa__stanza" data-stanza="11"></div>
            <div class="casa__velo" data-velo></div>
            <div class="casa__maschera"><h2 class="casa__nome" data-nome>Calle Olmo<br>Apartment</h2></div>
            <ul class="casa__dati" data-dati>
              <li><span class="dato"><small>Delivered</small><span>in 58 days</span></span></li>
              <li><span class="dato"><small>Area</small><span>132 m<sup>2</sup></span></span></li>
              <li><span class="dato"><small>City</small><span>Seville, Spain</span></span></li>
            </ul>
          </article>
          <article class="casa" data-casa>
            <div class="casa__stanza" data-stanza="27"></div>
            <div class="casa__velo" data-velo></div>
            <div class="casa__maschera"><h2 class="casa__nome" data-nome>Ribera<br>Loft</h2></div>
            <ul class="casa__dati" data-dati>
              <li><span class="dato"><small>Delivered</small><span>in 74 days</span></span></li>
              <li><span class="dato"><small>Area</small><span>96 m<sup>2</sup></span></span></li>
              <li><span class="dato"><small>City</small><span>Valencia, Spain</span></span></li>
            </ul>
          </article>
          <article class="casa" data-casa>
            <div class="casa__stanza" data-stanza="45"></div>
            <div class="casa__velo" data-velo></div>
            <div class="casa__maschera"><h2 class="casa__nome" data-nome>Patio Nueve<br>House</h2></div>
            <ul class="casa__dati" data-dati>
              <li><span class="dato"><small>Delivered</small><span>in 103 days</span></span></li>
              <li><span class="dato"><small>Area</small><span>210 m<sup>2</sup></span></span></li>
              <li><span class="dato"><small>City</small><span>Granada, Spain</span></span></li>
            </ul>
          </article>

          <nav class="nomi" data-nomi aria-label="Homes">
            <button type="button" data-vai="0">Calle Olmo</button>
            <button type="button" data-vai="1">Ribera</button>
            <button type="button" data-vai="2">Patio Nueve</button>
          </nav>
          <div class="piede" data-piede>
            <a class="tasto tasto--scuro" href="#">View home</a>
            <a class="tasto" href="#">All homes</a>
          </div>
        </div>
      </div>
    </section>

    <section class="chiusura">
      <p class="etichetta">Next</p>
      <h2 class="apertura__titolo">Calm by design.</h2>
    </section>
  </main>

  <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="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.

58 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 frames of the apartment” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The projects of a made-up interior studio. After a cream page comes a green section, and as it arrives a row of cream bars, one tall and one short in turn, pulls back upwards like a comb. Then the screen stops and the scroll works inside: the picture of a home, Calle Olmo Apartment, grows from two thirds to the whole screen, and behind it two green frames, which started at the same size, grow faster. For a while you see the home inside a frame inside another frame, like rooms in a row. Halfway through, the name of the home drops into place from behind an edge, the figures arrive from the side, the names of the three homes and the two buttons appear, the buttons dropping in, and the picture darkens. From there the homes change on their own every five seconds: the new one comes in from the right over the old one. Scrolling back up, below that point, they stop on the first.

How it works

The comb

At the top of the green section there is a row of BARS cream bars. A timeline with ScrollTrigger, from when the section comes in at the bottom to when its top is at 35% of the screen, with scrub SCRUB, takes the height of the bars to zero: some start at TALL hundredths of the screen, the others at SHORT, with the same EASE curve.

Three pieces from the same size

The stage is sticky and 100lvh tall. Inside it the far frame, the near frame and the window with the home are as big as the stage, and all start at scale START. A second timeline, from when the top of the section is half a screen above the screen to the end, takes the far frame to FAR in 3 beats, the near one to NEAR a tenth later and the window to 1 two tenths later: growing at different speeds, the frames show up one after another around the home.

The name, the figures and the buttons

The name sits in a mask with overflow: hidden and starts at yPercent: -120 and 40 pixels to the right; each figure sits in its own mask and starts at -85% and 40 pixels to the left. They all arrive at half a beat, in one beat. At 1 the names of the homes and the buttons appear at once, the buttons dropping 48 pixels over two beats; at 1.5 the dark veil appears on the picture.

The homes that change

The onUpdate callback checks how far the scroll is: above UNLOCK_AT the homes unlock and a gsap.delayedCall moves to the next every EVERY seconds; below, they lock and go back to the first with no animation. The change is a clip-path from inset(0 0 0 100%) to zero in SPEED seconds, with the new room settling from 1.08 to 1 meanwhile. The names at the bottom go to a home and restart the count.

The rooms

The homes are SVG drawings the script makes from a number: wall, floor, a window with the garden, the light on the floor, sofa, picture, lamp and plant, in colours taken from a few warm palettes. On a phone the drawing keeps sofa, lamp and window near the middle, because the tall window only shows a slice of it.

Values to change

Name	File	Default	What it changes
`START`	script.js	`0.65`	The size the picture and frames start from (0.65 on the site).
`FAR`	script.js	`1.5`	Where the far frame ends (1.5 on the site).
`NEAR`	script.js	`1.25`	Where the near frame ends (1.25 on the site).
`SCRUB`	script.js	`0.8`	How long the animation takes to catch up with the scroll (0.8 on the site).
`EASE`	script.js	`'power2.inOut'`	The curve of every step (power2.inOut on the site).
`TALL`	script.js	`65`	The tall bars, in hundredths of the screen (65 and 25 on the site).
`UNLOCK_AT`	script.js	`0.48`	From where the homes change on their own (1.5 out of 3.12 on the site).
`EVERY`	script.js	`5`	The seconds between one home and the next (5 on the site).
`SPEED`	script.js	`0.6`	How long the change takes (0.6 on the site).

Try them in the Playground

When to use it

To show the projects of a studio, a developer’s apartments, the rooms of a hotel: the moment a picture takes the stage and then makes way for its sisters.

On phones

The same: the window is as tall as the screen, the name sits at the top, the figures in a row above the buttons, which spread across the whole line.

With reduced motion

The frames and the picture are already in place, with no comb and no growing; the homes change on their own with a fade.

Pitfalls

The frames must be siblings of the window, not its parents: with the window inside the frame, the frame’s scale multiplies with its own and the picture becomes huge.
The name dropping from -120% shows over the picture unless it sits in a mask; and every figure wants its own, because a figure moved up by 85% ends up over the one before.
The change of home must be stopped even when you scroll back up halfway through a change: take the change to its end with progress(1) before going back to the first, or two half-cut homes are left.
The heights of the comb in hundredths of the screen must be given as functions with invalidateOnRefresh, or when you turn the phone they keep the old ones.

Libraries

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

Compressed with gzip, the three demo files weigh 7.7 KB; the libraries: GSAP + ScrollTrigger 45 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.