The manifesto under construction

Text, Scroll, SVGGSAPAdvancedCompressed weight: Demo 14 KBGSAP + ScrollTrigger 45 KBFreeDownload the zip

Scroll inside the preview

An architecture studio's manifesto is built like a building as you scroll: the dashed drawing, the scaffolding rising floor by floor, the crane bringing each word hung from a beam and setting it down with a swing, the skip pouring concrete into the letters, then the formwork, the scaffolding and the crane come away.

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 manifesto under construction</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <section class="apertura">
      <p class="apertura__studio">Kalk Architects</p>
      <h1 class="apertura__titolo">Our manifesto is still a building site.</h1>
      <p class="apertura__nota">Scroll down and watch it go up: drawn, scaffolded, lifted, poured, stripped.</p>
    </section>

    <!-- il cantiere: una scena alta molti schermi, il palco resta fermo (sticky) e lo scorrimento manda avanti i lavori -->
    <section class="scena" data-scena aria-label="The manifesto, built as you scroll">
      <div class="palco" data-palco>
        <h2 class="nascosto" data-titolo>Form follows care</h2>
        <svg class="cantiere" data-cantiere aria-hidden="true" focusable="false"></svg>

        <p class="motto" data-motto>Everything temporary comes down. The words stay.</p>

        <!-- la palizzata del cantiere, in basso: il nome dello studio e la fase dei lavori -->
        <div class="palizzata" data-palizzata>
          <p class="palizzata__studio">Kalk Architects</p>
          <p class="palizzata__fase"><span class="palizzata__ora">Now</span> <span class="fase" data-fase aria-live="polite"></span></p>
        </div>
      </div>
    </section>

    <section class="chiusura">
      <h2 class="chiusura__titolo">Form follows care.</h2>
      <p class="chiusura__testo">We draw slowly, build in the open and take down everything that was only there to help. What is left has to stand on its own.</p>
    </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.

31 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 manifesto under construction” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The building site of Kalk Architects, a made-up studio, sits on a still stage while the page scrolls: at the top the orange jib of a tower crane, at the bottom the dark site hoarding with the studio's name and the current phase of work, which changes with letters rising from their mask (Drawing, Scaffolding, Lifting, Pouring, Striking, Handover). First the drawing appears: the outlines of the three words, FORM FOLLOWS CARE, dashed in blue, with a horizontal and a vertical dimension line. Then it is built from the bottom, one floor per word. The scaffolding goes up: the tubes shoot up from the ground with a little bounce, the ledger runs across, the braces are drawn, the couplers snap into place and the boards drop one by one and bounce. Meanwhile the crane brings that floor's word: the letters are rebar cages inside orange formwork, hung by slings from a lifting beam; they come in from the left, swing back as the trolley speeds up and forward as it brakes, settle and come down onto the boards, which flex, while a little dust rises. The hook lets go, rises and leaves to fetch the next word. With all three words in place the concrete skip arrives with its hose: it passes over every letter, the pour comes down and the wet concrete rises inside the letter with a wave that slides sideways. At the end the formwork comes off, the concrete dries and gets lighter, showing the board marks and the tie holes, the scaffolding is taken down from the top (the boards fly off spinning, the tubes sink back into the ground), the crane's jib slews away and the tower goes down. What stays is the concrete words and one line: Everything temporary comes down. The words stay. Scrolling back up, the site builds itself again in reverse.

How it works

One timeline and one redraw

The scene is nine screens tall and the stage is sticky (100lvh). The whole site is one paused GSAP timeline, driven by ScrollTrigger with scrub: the static pieces (tubes, boards, outlines, formwork) are moved by the timeline directly; the crane and its loads are a state object instead (hook position, cable length, swing angle, what it carries) and on every update the disegna() function redraws them from those numbers. The instant changes (the word hooked on, let go, the skip in place of the beam) are tl.set calls, which undo themselves when you scroll back.

Sizes from the typeface

The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. Each letter is measured with getComputedTextLength at six widths of the typeface (Archivo, wdth axis from 125 to 66) and the cap height with measureText on a canvas. The script picks the widest width at which the words fill the stage as far as the height allows; everything else (tubes, boards, hook, skip, slings) is counted in letter heights. On a phone the words are narrower, there is sky to spare and the words move up: the lowest floor of the scaffolding grows tall and gets ledgers and braces in between.

The pendulum

Everything hanging from the crane sits in a group rotated around the trolley; the hanging word gets the same rotation plus a shift that brings its top under the hook. The angle follows a set of keyframes: back with sine.out while the trolley speeds up (power2.inOut), forward as it brakes, then smaller and smaller swings while the word comes down. When it touches, the hook and the boards dip a hair together and spring back with elastic.out, and two puffs of dust spread and fade.

The rising concrete

Each letter has three layers: the cage (a rebar pattern cut by a clipPath made of the letter), the pour and the formwork (the letter with no fill and an orange outline). The pour is the filled letter cut by a second clipPath: a sine wave with a solid bottom, which the script moves up with the level and sideways by a fraction of a wavelength, so the surface moves while it rises. The wet concrete is a darker copy on top of the dry one; as it dries it fades and uncovers the pattern with the board marks and the tie holes.

Striking

The scaffolding comes down from the top floor: the boards fly off spinning with back.in, the couplers close, the braces are erased by pushing stroke-dashoffset past their length, the ledgers shrink and the tubes sink into the ground with scaleY downwards. The crane brings the hook back near the tower, the jib narrows with scaleX around the tower (it looks like it slews away) and the tower goes down out of the stage. A finished letter, touched with the mouse, gives a little elastic hop.

Values to change

Name	File	Default	What it changes
`WORDS`	script.js	`['FORM', 'FOLLOWS', 'CARE']`	The words of the manifesto, one per floor, top to bottom: they are built from the bottom. It works with one to five words; the longer they are, the narrower the typeface gets.
`LENGTH`	script.js	`9`	How many screens of scrolling the site lasts: more means slower work.
`SMOOTH`	script.js	`0.8`	How far the work trails the scrolling, in seconds: 0 ties it to your finger, 2 makes it catch up calmly.
`SWING`	script.js	`1`	How much the words and the skip hanging from the crane swing (0 = still, as if on a rail).
`BOUNCE`	script.js	`1`	How much the tubes, couplers and boards bounce, and how much the boards flex when the word lands.
`DRY`	script.js	`true`	The concrete dries, gets lighter and shows the board marks and the tie holes. With false it stays dark and smooth.
`--gru, --gesso, --cemento`	style.css	`#E8642C, #3F6FAE, #A9A49B`	The colour of the crane and the formwork, of the dashed drawing and of the dry concrete; next to them are those of the scaffolding, boards, rebar and wet concrete.

Try them in the Playground

When to use it

For the opening or the about page of an architecture studio, a builder, an engineer or an agency that wants to tell its method as a building site; for the slogan of an estate agent or a new housing development, or for a coming-soon page that turns into a show.

On phones

The same site with the sizes adapted: the crane's tower stays off screen and you see the jib coming in from the right, the typeface narrows so the longest word fits, and the words sit halfway up the screen on a taller scaffolding.

With reduced motion

Nothing moves and nothing swings: as you scroll the drawing fades in, then the cages in their formwork, then the concrete; the formwork and the drawing fade away, the concrete dries and the line appears. There is no crane and no scaffolding, and the scene is four screens long instead of nine.

Pitfalls

Lowering a lower floor's word after the whole scaffolding was up, the letters passed in front of the boards of the floors above: it is built one floor at a time, from the bottom, and the scaffolding above goes up only after the word has landed.
The braces erased with stroke-dashoffset left a dot at the end of the line: the gap of the dash pattern is a little longer than the line, and the brace also fades out.
The dust puffs made with fromTo from 0.6 opacity to 0 came back when scrolling up, because a rewound tween shows its start: they are made with two keyframes, from 0 to 0.6 and back to 0.
On a phone the longest word sets the size and half a screen of empty sky was left above it: the words rise by part of the spare sky, and the lowest scaffolding floor stretches down to the ground with levels in between.
The crane and its loads cannot live in separate tweens on the elements, because the hanging word must turn around the trolley like the hook: they are numbers in an object, and one function redraws hook, cables, beam, skip and word on every update.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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