The folding rule logo

Intro, SVGGSAPMediumCompressed weight: Demo 5.1 KBGSAP 28 KBFreeDownload the zip

A minimal-style logo intro: a carpenter’s folding rule, drawn in thin vermilion lines, drops shut onto the page and opens stick by stick, each one flipping over the one before like a walking caterpillar, until it lies flat under the whole name; then the letters rise out of the rule one after the other. In the Playground you type your own name.

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 folding rule logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the stage: the script draws the folding rule, unfolds it under the name and raises the letters from it -->
    <svg class="palco" data-stage role="img" aria-label="tenon" xmlns="http://www.w3.org/2000/svg">
      <g data-word></g>
      <g data-rule></g>
    </svg>
    <button class="ancora" type="button" data-replay>Replay</button>
  </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 folding rule logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white page a folded rule drops from above: a single stick drawn with a thin vermilion outline, the centimetre marks along its edge and a number near the end. It touches its line, passes it by a pixel and settles with a slight tilt. Then it opens: the first joint turns and the rest of the rule, still folded, flips over the first stick; the next joint starts before the last has finished, so the rule walks to the right like a caterpillar, with the sticks passing over the top and the numbers turning upside down and back. Every joint locks a hair past straight and springs back. When the rule lies under the whole name, the letters of “tenon”, the made-up brand of a joinery, rise out of it one after the other, from the left, light and narrow while they grow, then heavier, a pixel taller than they should be and right again; the rule feels the last one with a small shiver. The logo stays still on its rule and a small Replay appears at the bottom.

How it works

A chain of sticks

The rule is a chain: the first stick stays still, every other one turns by an angle (phi) on top of the one before. One function, after every frame, adds up the angles from the first to the last and puts every stick at the end of the one before, with translate and rotate. Folded, every joint is turned half a turn backwards and the sticks lie one on top of the other; open, all the angles are zero.

The flip

The joints go from -π to zero, all on the same side, so the rest of the rule always passes over the line and never through it. Each joint starts STEP seconds after the one before and lasts TURN seconds: they overlap, and the rule opens like a walking caterpillar instead of in jerks. Every stick is filled with the colour of the page, so the ones on top cover the ones below like real objects.

The extra pixel

Each joint reaches SETTLE degrees past straight with power2.inOut and comes back to zero with elastic.out(1, 0.35). The fall of the folded rule also passes its line by a pixel and settles with a small tilt, and the letters grow to 103.5 per cent of their height before coming back.

The letters rising

Each letter is an SVG text in Instrument Sans, with scale(1 k) on its baseline: k goes from zero to one. While it grows it changes its variable axes, wght from 320 to 660 and wdth from 78 to 100, then drops to its resting weight. The size of the name and the length of the rule come from the true width of the ink, measured on a canvas.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'tenon'`	The logo: the rule opens as long as the name.
`STICKS`	script.js	`6`	How many sticks the rule has.
`UNIT`	script.js	`20`	The centimetres of each stick, for the numbers printed on the rule.
`STEP`	script.js	`0.3`	The seconds between one joint and the next.
`TURN`	script.js	`0.62`	The seconds a joint takes to open.
`SETTLE`	script.js	`1.2`	How many degrees a joint goes past straight before it springs back.
`SPEED`	script.js	`1`	The speed of the whole intro: 2 is twice as fast, 0.5 half as fast.
`REPLAY`	script.js	`true`	The small Replay button that appears at the end (a click anywhere on the page restarts the intro anyway).

Try them in the Playground

When to use it

For the opening of the site of a joinery, an architect or an interior design studio, a tool or DIY shop, a furniture brand; also for the page of a made-to-measure project. It suits short, lowercase names.

On phones

The same rule with the same joints, smaller, so that the name takes almost the whole width of the screen. A tap restarts it.

With reduced motion

Nothing unfolds: the rule fades in already flat and the name fades in above it a moment later.

Pitfalls

With joints that open in alternating directions, like a real rule folded zig-zag, half the sticks pass under the line and through the letters: all joints go from -π to zero, on the same side.
Sticks drawn with an outline only, folded on top of each other, show all their marks at once in a tangle: every stick is filled with the colour of the page, and the one on top covers the others.
GSAP does not draw an SVG rotated about a point that changes every frame: the chain is written by hand with translate and rotate on each stick’s group, after every frame of the timeline.

Libraries

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.1 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.