The masking tape nav

Navigation, SVG, 3D, HoverGSAPAdvancedCompressed weight: Demo 10 KBGSAP 28 KBFreeDownload the zip

The links of an illustrator's portfolio, the current one sitting on a strip of cream masking tape, crooked and torn at both ends. Choosing another link the strip peels off with a fold that lifts and shows its back, and a roll comes in from the edge, lays a new strip on the word, tears it off with a ragged end that is never the same and slaps it down.

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 masking tape nav</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the nav of an illustrator's portfolio: the current link sits on a strip of masking tape. Choosing another link
         the strip peels off with a fold that lifts and shows its back, and a roll comes in from the edge, lays a new
         strip on the word, tears it off with a ragged end and slaps it down -->
    <nav class="mt" aria-label="Main" data-nav>
      <div class="mt__desk" aria-hidden="true" data-desk></div>
      <ul class="mt__list" data-list>
        <li><a class="mt__link" href="#" aria-current="page" data-link><span class="mt__word" data-word>Illustration</span></a></li>
        <li><a class="mt__link" href="#" data-link data-autoclic><span class="mt__word" data-word>Prints</span></a></li>
        <li><a class="mt__link" href="#" data-link data-autoclic><span class="mt__word" data-word>Shop</span></a></li>
        <li><a class="mt__link" href="#" data-link data-autoclic><span class="mt__word" data-word>About</span></a></li>
      </ul>
    </nav>

    <!-- what every strip is made of: the paper's fibres, running along the strip, its sheen and the soft shadow under it -->
    <svg class="mt__defs" aria-hidden="true" focusable="false">
      <defs>
        <!-- the texture is drawn once by the script, as an image: cheaper to repaint than a noise filter -->
        <pattern id="mt-fibres" patternUnits="userSpaceOnUse" width="240" height="60">
          <image width="240" height="60" data-fibres/>
        </pattern>
        <filter id="mt-soft" x="-20%" y="-60%" width="140%" height="220%">
          <feGaussianBlur stdDeviation="1.6"/>
        </filter>
        <linearGradient id="mt-crease" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stop-color="#46300e" stop-opacity="0.34"/>
          <stop offset="1" stop-color="#46300e" stop-opacity="0"/>
        </linearGradient>
        <linearGradient id="mt-sheen" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#ffffff" stop-opacity="0.34"/>
          <stop offset="0.45" stop-color="#ffffff" stop-opacity="0"/>
          <stop offset="1" stop-color="#7a5a20" stop-opacity="0.08"/>
        </linearGradient>
      </defs>
    </svg>
  </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.

17 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 masking tape nav” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background four links in a serif typeface, Illustration, Prints, Shop and About, grey except the current one, black and sitting on a strip of masking tape: cream, a little see-through, with fibres running along it, a sheen on its top edge, a soft shadow under it, a little crooked and torn by hand at both ends, with the teeth and white threads of the paper. On arrival a roll of tape comes down from the top edge, lays the tape under Illustration as it spins, tears it off with a jerk and the strip is slapped onto the page: it flattens for a moment, bounces back and its wrinkles smooth out. Clicking another link the old strip peels off from the end facing the new link: a fold line runs along it and the part peeled lifts and folds back over the rest, showing the duller back, then the whole strip flies off as it fades. Meanwhile the roll comes down over the new word, lays a new strip at a different angle, tears it off and slaps it down. Pointing at the taped link lifts the strip's bottom right corner, with its shadow; pointing at another link lifts the corner on that side a little, as if the tape were about to come away. Clicking the link already chosen, the tape is pressed down again with a pat.

How it works

The tear, never the same

The two ends of every strip are drawn at every tear by midpoint displacement: 33 points down the height, each level smoother than the one before (0.58 times, starting from ROUGH), plus a row of alternating teeth and a slant, as when the hand pulls sideways. The long edges, cut by the roll's blade, are nearly straight. On the ends, a pale stroke and a few loose threads make the fibres of torn paper. All the chance comes from a seeded generator whose seed grows at every tear, so the sequence is always the same.

The paper

The strip is an SVG as big as itself: a blurred shadow, the cream body at 84%, the fibres (a tile of long thin threads drawn once on a canvas and used as a pattern), a sheen fading from the top, the wrinkles, the torn edge and a dark veil for the shadows of the fold. The strip lies under the words, so the text is never covered, and each angle differs from the one before by at least half of TILT.

The fold in 3D

The strip is drawn twice: the part still stuck and the part peeling, cut along the fold line by two polygon clip-paths (the rectangle cut by the half plane, worked out every frame). The peeling part turns about the line with rotate3d, on the axis chosen so it comes towards the viewer; past 90 degrees it shows the back, and a dark veil grows with the sine of the angle. On the stuck part, along the fold, a gradient makes the shadow.

The roll's journey

A timeline: the old strip folds back (the line runs two thirds of the strip in PEEL seconds, leaning by 6 degrees) and then flies off; the roll comes down from the top edge spinning by the distance travelled over its radius, crosses the word in LAY seconds while a clip-path uncovers the tape behind it, then the tear: the ragged end appears, the roll jerks up and vanishes, the strip flattens (scaleY 0.9) and comes back with elastic.out while the wrinkles fade.

The corner that lifts

Pointing at a link, or reaching it with Tab, the same fold serves for a corner: a line from the bottom edge to the end cuts off the corner's triangle, which lifts by LIFT degrees (or by a little under half towards another link) with back.out and a cast shadow. Going from one side to the other the first corner goes down before the other comes up.

Values to change

Name	File	Default	What it changes
`TILT`	script.js	`4`	How crooked a strip can be, at most, in degrees.
`ROUGH`	script.js	`4.5`	How jagged a torn end is, in pixels.
`OVERHANG`	script.js	`14`	How far a strip runs past its word on each side, in pixels.
`PEEL`	script.js	`0.55`	The seconds the old strip takes to peel off.
`LAY`	script.js	`0.34`	The seconds the roll takes to lay a strip across a word.
`LIFT`	script.js	`52`	How far the corner lifts under the pointer, in degrees.

Try them in the Playground

When to use it

For the nav of an illustrator's or designer's portfolio, a stationery shop, a creative studio, a print shop or a work journal.

On phones

The row shrinks with the screen (the text down to 19 pixels, the gaps down to 10) and the roll and the tape follow the size of the text; a tap chooses with no wait for a double tap, and the roll leaves upwards, without going off the side of the screen.

With reduced motion

No roll, no fold and no corners lifting: the old strip fades out and the new one, already torn and crooked, fades in on the word chosen.

Pitfalls

Chrome may not draw at all an element that has both a clip-path and a rotate3d on a slanted axis: the clip-path sits on a box inside the one that turns, and the problem goes away.
The feTurbulence filter for the fibres had to be worked out again every frame while the clip-path changed, and the animation stuttered: the fibres are a tile drawn once on a canvas and used as an SVG pattern.
The shadow of the fold must stay inside the shape of the tape: as an HTML element it spilled past the torn ends; now it is a rectangle with a gradient inside the SVG, cut by a clipPath with the strip's shape.
If the fold runs the whole strip, the peeled part ends up past the end and passes over the next word: it stops at two thirds and then the whole strip flies off.
A choice can come halfway through the journey: the running timeline is taken to its end (progress(1)), so the strip just laid becomes the old one and peels off like the others.

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

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

Testing

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