The tape measure slider

Sliders, Physics, SVGGSAPAdvancedCompressed weight: Demo 18 KBGSAP 28 KBFreeDownload the zip

A table’s length set with a tape measure: pull the brass hook and the printed steel tape slides out of the yellow case with its numbers travelling, while the table drawn above grows with its end always over the hook. Let go, it settles on a whole centimetre; with the lock off the tape whips back in, the numbers blur and the hook clacks against the mouth.

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 tape measure slider</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the tape measure slider: the length of a table, set with a retractable steel tape measure. The table is drawn
         above it with its length on a dimension line, and its right end always stands over the brass hook. Pull the
         hook and the printed tape slides out of the yellow case, the numbers travel past the mouth and the table grows;
         let go and it settles on a whole centimetre. With the red lock slider off, the tape whips back into the case
         and the hook clacks against the mouth. The chips glide it to a length for four, six or eight people -->
    <div class="tm" data-tm data-lock="on">
      <div class="tm__rig" data-rig>
        <!-- the drawing: the table, its dimension line with the length, and the tape measure; the script draws it to
             the width it gets -->
        <svg class="tm__art" aria-hidden="true" focusable="false" data-art></svg>
        <!-- the hook is the slider's thumb: an empty handle that the script keeps over the brass hook -->
        <div class="tm__hook" role="slider" tabindex="0" aria-label="Table length" aria-orientation="horizontal"
             aria-valuemin="80" aria-valuemax="240" aria-valuenow="160" aria-valuetext="160 centimetres" data-hook></div>
      </div>

      <div class="tm__controls">
        <div class="tm__lockrow">
          <button class="tm__lock" type="button" aria-pressed="true" aria-describedby="tm-hint" data-lock-btn>
            <svg class="tm__padlock" viewBox="0 0 20 20" aria-hidden="true">
              <path class="tm__shackle" d="M6.2 9V6.6a3.8 3.8 0 0 1 7.6 0V9"/>
              <rect class="tm__body" x="4" y="8.6" width="12" height="9" rx="2.2"/>
              <path class="tm__keyhole" d="M10 11.6v2.6"/>
            </svg>
            <span>Lock</span>
            <span class="tm__badge" aria-hidden="true" data-badge></span>
          </button>
          <span class="tm__hint" id="tm-hint" data-hint></span>
        </div>
        <!-- the chips: data-preset is the length each one sets, and the script writes it under the name -->
        <div class="tm__presets" role="group" aria-label="Table sizes">
          <button class="tm__chip" type="button" data-preset="120">Seats 4<span class="tm__cm" data-cm></span></button>
          <button class="tm__chip" type="button" data-preset="180" data-autoclic>Seats 6<span class="tm__cm" data-cm></span></button>
          <button class="tm__chip" type="button" data-preset="230">Seats 8<span class="tm__cm" data-cm></span></button>
        </div>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </div>
  </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.

47 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 tape measure slider” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background an oak table drawn from the front, with its dimension over it: a thin line with slashes at the ends and the length in the middle, 160 cm. On the floor two small marks show where the range starts and ends, 80 and 240. Below them lies a tape measure: the yellow case with its ribbed black rubber grip, the chrome belt clip with its screw, a little window showing the tape magnified, millimetres and all, under a red hairline, the red lock slider on top of the case and the chrome mouth. Out of the mouth comes the yellow steel tape, slightly cupped, printed with centimetre ticks, red ones every ten and the red box of the metre, up to the brass hook with its two rivets; a dashed line runs down from the table’s end to the hook. When the page opens the tape slides out to its length. Dragging the hook, the tape comes out or goes back in and the numbers pass the mouth, the table grows and shrinks with it and the dimension follows; the hook slides a hair on its rivets and swings. Pulled up or down the tape bends a little and, let go, springs straight with a quiver. On release the length settles on a whole centimetre with a tick of the hook and a flash in the window. Beside it, the Lock button says whether the lock is on: on, the tape stays where it is; off, as soon as it is let go the tape shoots back, speeds up, the numbers blur, the hook clacks against the mouth, bounces once and the case jolts. The Seats 4, Seats 6 and Seats 8 buttons glide the tape on a spring, a little past and back, to 120, 180 or 230 centimetres, and the one whose length it reaches turns dark.

How it works

A centimetre of table is a centimetre of tape

The scale comes from the width: k pixels per centimetre, so the longest length (MAX) fits in the drawing. The tape’s mouth sits MIN·k from the table’s left end, so with the hook against the mouth the table is MIN long, and its right end is always exactly over the hook. The table, the dimension and the dashed line are drawn again from the same length; the case gets smaller when there is little room left of the mouth.

The tape along a curve

There is one state: how much steel is out of the mouth. The tape runs straight inside the case and then, when it is pulled up or down, follows the curve of a shelf loaded at its tip, y = dy·(3t² − t³)/2, taken at 25 points with their slope. The strip is the polygon of its two edges moved along the normals; the cupping is made of strokes along parallel lines, not a gradient, so the light follows the bend. The print is measured from the tip: u pixels from the hook the tape reads MIN + u/k, and every tick and number is laid on the curve at its distance, turned with it. So that bending does not change the length, the tip sits at x = ℓ − 0.6·dy²/ℓ.

The window with the millimetres

Outside there are two or three pixels per centimetre: too few for millimetres. The window on the case shows the same reading as the mouth, magnified to 30 units per centimetre, with millimetre, half centimetre and centimetre ticks, the numbers beside their tick so the red hairline never cuts them and the tens in red. When the tape runs, a horizontal-only feGaussianBlur, as big as the speed, blurs the print outside and inside the window.

The hook and the bend

The hook sits on its rivets in two slots: pulled by the hand it moves PLAY pixels forward, pushed it goes back, and when the tape moves on its own it lags behind by inertia; at the ends of the slot it bounces. It turns a little on the rivets on an angular spring (SWING) pushed by the tape’s acceleration. The bend is a damped spring (BEND): while dragging it follows the finger, held to a few pixels on a short tape, and let go it quivers until it is straight.

The whip and the springs

With the lock off, on release the spring inside the case pulls the tape with a steady force (PULL): it speeds up until the hook slams into the mouth, bounces with BOUNCE of its speed, is pushed back on its rivets, and the case jolts and rocks on two springs. The buttons and the keys take the tape to its length on the GLIDE and KEYS springs, a release with the lock on settles on the whole centimetre on SNAP. It all steps on GSAP’s ticker, with the step held to 1/30 of a second, and nothing is drawn again when nothing moves.

Values to change

Name	File	Default	What it changes
`MIN`	script.js	`80`	The shortest length, in centimetres: the hook against the mouth.
`MAX`	script.js	`240`	The longest length: the hook at the end of the drawing. It also sets the scale, and so how tall the table is.
`START`	script.js	`160`	The length when the page opens.
`STEP`	script.js	`1`	How many centimetres an arrow key moves the tape.
`BIG_STEP`	script.js	`10`	How many centimetres Shift with an arrow and the Page keys move it.
`GLIDE`	script.js	`[72, 8.6]`	The spring of the Seats buttons: stiffness and damping (less damping, more overshoot).
`KEYS`	script.js	`[420, 36]`	The quicker spring of the keys: stiffness and damping.
`SNAP`	script.js	`[900, 54]`	The small spring that takes the tape to the whole centimetre on release.
`PULL`	script.js	`4200`	How hard the case’s spring pulls the tape in with the lock off, in pixels per second squared.
`BOUNCE`	script.js	`0.14`	How much of its speed the hook keeps when it bounces off the mouth.
`BEND`	script.js	`[250, 6.5]`	The spring of the steel when it is bent and let go: stiffness and damping.
`PLAY`	script.js	`1.6`	How far the hook slides on its rivets, in pixels.
`SWING`	script.js	`[380, 14]`	The hook’s little swing on its rivets: stiffness and damping.
`SAY_ON`	script.js	`Stays where you leave it`	The line under Lock when the lock is on.
`SAY_OFF`	script.js	`Springs back when let go`	The line under Lock when the lock is off.
`data-preset`	index.html	`120, 180, 230`	The length each button sets, in centimetres; the script writes it under the name.

Try them in the Playground

When to use it

For the length of a table, a desk or a bookcase in a furniture configurator, the width of a curtain or a rug, a cut of fabric or cable: wherever the value is a length in centimetres and it helps to see the thing that changes.

On phones

The drawing takes the width of the screen minus a margin: the centimetre scale shrinks so the whole range fits, the table with it, and the case keeps its size. The tape keeps its ticks every 5 and every 10 centimetres and a number every 20; the millimetres stay in the window. A finger drags the hook without scrolling the page only on the hook itself (touch-action: none); the Lock button and the three buttons go on two rows.

With reduced motion

No bend, no swing or slide of the hook, no blur and no jolt of the case: without the lock, on release the tape goes back in a third of a second with a plain ease; the buttons and the keys take it to its length in 0.28 seconds, and when the page opens it is already at its length. The preview, instead of pulling the hook, goes from one button to the next.

Pitfalls

The hook against the mouth means the shortest length, not zero: if the print started at 0 at the hook, the mouth would read the length minus MIN. The print reads MIN at the tip, so the mouth and the window read the table’s length itself, and the numbers ride with the steel instead of sliding over it.
At 2-3 pixels per centimetre the millimetres on the tape turned into a grey band: outside there are centimetres (or only the 5 and 10 ticks under 1.7 pixels per centimetre) and the millimetres go into the magnified window.
A vertical gradient for the tape’s cupping does not follow the bend: at the tip the light ended up on the edge. The cupping is made of strokes along lines parallel to the tape’s middle, which bend with it.
Bent, the tape is longer than the distance from mouth to hook: keeping the tip still, the length went up as the finger moved up and down. The tip moves back by 0.6·dy²/ℓ, as much as the curve lengthens the tape.
The case’s face, drawn over the tape, covered the tape inside the chrome mouth: the face has a notch at the height of the slot, and the hook, when it goes back in, shows inside the mouth.
The window’s numbers centred on their tick were cut by the red hairline exactly when the length was right: they sit beside the tick.
Focusing the hook on pointerdown, so the arrows work straight after a drag, brought up the keyboard ring with the mouse too: a class hides it until a key is pressed.
The preview’s automatic click on the same button did nothing after the first one. A click that is not a person’s (isTrusted false) is a pretend hand: when the tape is at 180 already it pulls the hook, takes the lock off and lets go. detail 0 is not used to tell, because Enter and Space on a button give detail 0 too.
After slamming into the mouth the hook kept swinging for seconds: the swing’s spring is more damped and the knock it gets smaller.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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