The loader that becomes a logo
Transitions, SVG, Text
NewFree
Back to the library
The seam
The screen split in two: on the left a technical drawing sheet, on the right paper. The same objects glide from one to the other and, crossing the seam, turn from plans into finished things. The seam can be dragged.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.
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 accessWhat it does
On the left a blue technical drawing sheet, with its grid, and the words «Prima è un disegno,» (first it is a drawing); on the right paper, with «poi è una cosa.» (then it is a thing). A row of eight objects (a chair, a lamp, a teapot, a moka pot, a plant, a radio, a cup, a camera) glides slowly from left to right. On this side they are chalk lines with dashed axes and dimensions, on the other they are coloured and inked: crossing the seam each object changes before your eyes, half drawing and half thing. At the start the seam takes half a step and comes back, to say it can be moved: dragging it decides how much sheet and how much paper to see. On phones the seam is horizontal and the objects move down from drawing to thing.
How it works
Two identical layers
The page has two stacked layers with the same row, the same objects in the same places. The first is cut with clip-path: inset(0 calc(100% − var(--cucitura)) 0 0), the second with inset(0 0 0 var(--cucitura)): together they make the whole screen, and moving the seam means changing a single CSS variable.
The same drawing, two outfits
Each object is an SVG with classed shapes: a, b and c are fills, t thick strokes, d thin ones, e highlights, g construction lines. On the sheet everything is a chalk stroke with vector-effect: non-scaling-stroke, so it stays 1.3 pixels at any size, and the g lines are dashed; on paper the fills take the object’s colours (CSS variables on the figure) with an ink outline, and the g lines disappear.
An endless row
The row holds as many copies of the set as it takes to cover the screen, plus one. A single number grows by 38 pixels a second in GSAP’s ticker and moves both rows in the same frame; the drawn position is that number wrapped inside one loop, between minus one loop and zero.
The seam
The handle is an accessible slider: it drags with pointer events listened to on the window, and with focus the arrow keys move it by 4% with power3.out, Home and End take it to the edges. At start it goes to 44% and back to 50% with elastic.out(1, 0.45). On phones the page gets the banco--alto class: the row becomes a column moving down and the cuts turn vertical.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
OGGETTI | script.js | 8 oggetti | Name, thing colours and drawing of each object, in 120 × 120: give the shapes the right classes and the sheet and the paper take care of themselves. |
PASSO | script.js | 38 | Pixels per second of the row. |
--blu, --carta | style.css | #1F4E9C, #F4EFE4 | The drawing sheet and the paper. |
--pezzo | style.css | clamp(108px, 25vh, 240px) | The size of an object: the row’s pitch and the handle follow from it. |
When to use it
For people who design and then make: design studios, architects, craftspeople, products. It tells the passage from idea to thing without one extra word.
On phones
The seam turns horizontal, the sheet sits above and the paper below, and the objects, smaller, move down in a column shifted to the right; the titles go to the left and the handle sits on the left edge, dragged vertically.
With reduced motion
The row stands still and the seam does not take its inviting half step: it only moves by dragging or with the arrow keys, at once, with no curve.
Pitfalls
- Both rows must be moved by the same number in the same frame: with two separate tweens sooner or later they drift by a pixel, and the seam shows it.
- CSS selectors do not enter use elements: to dress the same drawing two ways with classes, the drawing must be written twice (here the script writes it).
- Without vector-effect: non-scaling-stroke the sheet’s lines thicken on big screens and thin out on phones.
- The seam variable must carry its unit (50%, not 50), or calc(100% − var(--cucitura)) is invalid and the cut disappears.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Weight: 19 KB of our own files.
Testing
Tested on 27 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.
