The line that unrolls

SVG, TextGSAPMediumCompressed weight: Demo 5.3 KBGSAP 28 KBFreeDownload the zip

In the minimal style: a thin line rolled up tight in a spiral unrolls along the page like a tailor's tape, rolling and shrinking as it goes; behind it the ticks of the measure drop and the name of a made-to-measure shirt maker stands up out of the line letter by letter. Then it rolls back up from the end.

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 line that unrolls</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage aria-label="Lisle, made to measure. Click to roll it up and out again.">
    <!-- one thin line, rolled up tight: it unrolls along the page like a tape, the ticks of a measure and the name
         standing up behind it -->
    <svg class="scene" data-scene aria-hidden="true">
      <g class="ticks" data-ticks></g>
      <path class="tape" data-tape d="" />
      <line class="end" data-end />
    </svg>

    <h1 class="word" data-word>Lisle</h1>
    <p class="note" data-note>Shirts made to measure</p>
  </main>

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

13 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 line that unrolls” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a warm white page, on the left, a thin spiral winds itself in from its outer end to the centre: it is one line rolled up tight. After a breath it unrolls to the right like a tailor's tape pushed across the table: the roll rolls without slipping, turns on itself and gets smaller and smaller, and behind it the line lies flat and straight. As it passes, the ticks of a measure drop under the line one after the other (short, medium every five, long and dark every ten) and above the line the letters of the name, Lisle, stand up in a soft serif that gains weight as it rises: they come out of the line as if out of a slot, go a hair past and settle. When the last curl flattens the whole line quivers a few pixels and stops, an orange tick marks the end and underneath Shirts made to measure appears. After a pause the roll forms again at the end and goes back winding the line up, swallowing the ticks and pulling the letters back in; then the spiral comes undone and it all starts again. A click starts it over.

How it works

A roll as long as the line

The spiral is Archimedean, r(φ) = r₀ + p·φ/2π, and its length up to the angle φ is about r₀φ + pφ²/4π. The total angle is chosen so the roll holds exactly the length of the finished line, solving the quadratic. So the line never changes length: what lies flat plus what is still rolled up is always the same.

Rolling without slipping

GSAP tweens a single number, the part laid flat (0 to 1). From it: the contact point is the start plus the length laid, the angle left in the roll comes from the inverse formula, the centre is one radius above the contact. Every point of the spiral is drawn at the angle 90° − (Φ − φ), so as Φ shrinks the roll turns clockwise just like a wheel going right.

Ticks and letters tied to the roll

Ticks and letters have no tween of their own: how far they have grown is a function of how far the roll has gone past them (in pixels), passed through a damped spring written by hand, 1 − e^(−kq)·cos(8q), with k worked out so it overshoots by SPRING just once. The name sits in a box with overflow hidden that ends right on the line, so the letters come out of the line; the weight goes from 200 to 600 with the same q. Rolling back, the same functions pull them in on their own.

The final quiver

When the last curl flattens, the straight part is drawn as a polyline bent into half a wave with amplitude QUIVER·e^(−5t)·sin(34t): a single arc dying away in a second, like a taut thread just laid down.

Loop and reduced motion

One paused timeline: the spiral winds in (drawn from its outer end), unrolls, quivers, the orange tick arrives, a pause, it rolls back up and the spiral comes undone; on onComplete it starts from zero. With reduced motion the laid-out measure, with the name and the tick, fades in and stays.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Lisle'`	The name that stands up out of the line.
`ROLL`	script.js	`3.2`	The seconds the line takes to unroll across the page.
`BACK`	script.js	`2.1`	The seconds it takes to roll back up.
`PITCH`	script.js	`1`	How loose the roll is: 0.6 tight, 1.6 with the turns further apart.
`SPRING`	script.js	`0.04`	How far the letters and ticks go past their height as they stand up: 0 = not at all, 0.1 = a tenth.
`QUIVER`	script.js	`3`	How many pixels the whole line quivers when it lands flat: 0 = it just stops.
`HOLD`	script.js	`2.2`	The seconds the measure stays laid out.

Try them in the Playground

When to use it

As the opening of a tailor's, a made-to-measure shirt maker, a fabric, rug or runner shop; as the title of a «measurements» page or a size guide; anywhere a thin line can carry the name.

On phones

The same animation with the sizes adapted: the line is nearly as long as the screen, the roll has fewer turns and the name gets smaller to fit above it.

With reduced motion

Nothing rolls: the laid-out line with its ticks, the name, the orange tick and the line under it fade in and stay.

Pitfalls

With GSAP's elastic, letters a quarter of the screen tall overshot by a third of their height: a cartoon bounce. A damped spring written by hand lets the overshoot be set exactly (4% by default).
Letters that stood up as soon as the roll reached their left edge came up over it while it was still rolling underneath: they start once the roll has passed their right edge by one and a half radii.
There are more than a hundred ticks: each is rewritten only when its growth changes, not on every frame.
The rolled-up roll sticks out to the left of the starting point by its outer radius: the start of the line is worked out by taking that radius off, with a few rounds of approximation because the radius depends on the length.

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.3 KB; the libraries: GSAP 28 KB.

Testing

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