Menu on the guide

Hover, TextGSAP, CSS onlyMediumCompressed weight: Demo 6.7 KBGSAP 28 KBFreeDownload the zip

Five menu entries spread across the page, each on its own thin guide, some flush left, one centred, some flush right. A vermilion guide follows the pointer: the entry under it and the ones next door run to line up on it, one after the other, each on its own spring, and take weight; past the middle of the page they cross to the other side of the guide. Leave, and they go back to their places. Minimal style.

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>Menu on the guide</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" data-stage>
    <header class="top">
      <span class="top__name">Datum</span>
      <span class="top__note">Menu</span>
    </header>

    <!-- five entries, each resting on its own faint guide (flush left, centred or flush right). A thin guide follows the
         pointer: the entry under it and the ones next to it run to line up on it, and take weight -->
    <nav class="menu" aria-label="Main" data-menu>
      <div class="guide" aria-hidden="true" data-guide>
        <span class="guide__line"></span>
        <span class="guide__readout" data-readout>0</span>
      </div>
    </nav>

    <p class="hint">Point at the menu</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.

34 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 “Menu on the guide” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On warm white paper, at the top the studio's name, Datum, and on the right Menu; in the middle five big entries in light Archivo, Work, Studio, Journal, Prints and Contact, spread across the width like a free layout. Each one sits on its own guide, a very thin grey line: Work and Prints rest flush left on it, Studio and Contact flush right, Journal in the middle. As the page opens the five guides draw themselves one after the other and the entries rise out of their mask into place. Moving the pointer into the menu opens a vermilion guide, with a tick at each end and its position in pixels above it: it opens from the very point where the pointer came in and from there it follows it, a little behind, on a spring. The entry under the pointer runs at once to rest on the guide and goes from weight 280 to 700; the two next door start a moment later, on softer springs, and take half the weight. While they run the letters narrow a little, and widen again as they land; each one goes a pixel past and comes back, and the guide feels the knock. Moving the pointer sideways the lined-up entries follow it like a flag, the furthest a little behind. Past sixty per cent of the width the entries cross to the other side of the guide and rest their right side on it, one at a time; back under forty per cent they cross again to the left. Going up or down changes the entry under the pointer and the others follow. Leaving the menu the guide closes towards the last entry and the entries go back to their own guides, first the one that was under the pointer and then the others, losing weight.

How it works

A row, a guide, an entry

Each entry is an absolute link inside a row as tall as its type, and it moves only with transform: translateX from the menu's left edge. Its guide is a one-pixel span, set at its position (0 to 1 across the width). The entry's place comes from the guide and from how it sits on it: x = position times width minus the anchor (0 on the left, 0.5 in the middle, 1 on the right) times the word's width, always inside the menu.

The guide that follows

The vermilion guide is an eleven-pixel div with a one-pixel line drawn by its background and a tick at each end. It shows through clip-path: inset(), which opens from the point where the pointer came in and closes towards the last entry, carried by a GSAP tween. Its x chases the pointer's on a stiff spring, GUIDE_SPRING, so it stays a hair behind.

Staggered springs

When the entry under the pointer changes, each entry gets its order (line up, or go home) with a delay of STAGGER seconds for each row of distance: that is why they arrive one after the other, and leave the same way. Then each one chases its goal on a nearly critical spring, ENTRY_SPRING, softer for the entries further away: moving the guide sideways they trail behind like a flag. The springs are integrated by hand on GSAP's ticker in steps of 1/240 of a second.

Weight and width

The weight chases 280 at rest, 700 under the pointer and halfway for the neighbours, on a spring of its own with a little give: when the entry lands, the weight goes past and settles. The width axis (Archivo's wdth) drops with the entry's speed, by SQUEEZE at most: the running word narrows and widens again as it lands. The widths are read again every frame, before writing, because they change with both axes.

Side, hands and keys

The entries rest on the right of the guide while it stands under sixty per cent of the width, and on its left past it; to come back it has to go under forty, so at the border they do not flicker. A single pointermove on the window finds the row from the menu's band of height; outside the band the entries go back. A finger touches and drags, and when it lifts the entries stay lined up a moment before going back. With the Tab key the guide stands on the own guide of the entry that takes the focus.

Values to change

Name	File	Default	What it changes
`ITEMS`	script.js	`[['Work', 0.08, 'left'], …]`	The entries: the name, where its guide stands (0 to 1 across the menu) and how it sits on it (left, center, right).
`REACH`	script.js	`1`	How many entries on each side of the one under the pointer line up as well.
`STAGGER`	script.js	`0.07`	The seconds between one entry and the next, coming and going.
`ENTRY_SPRING`	script.js	`[260, 28]`	The entries' spring: how stiff, and how much it is held back.
`GUIDE_SPRING`	script.js	`[420, 34]`	The guide's spring behind the pointer: how stiff, and how much it is held back.
`WEIGHT`	script.js	`[280, 700]`	The entries' weight at rest and under the pointer (100 to 900); the neighbours take half.
`SQUEEZE`	script.js	`16`	How much a running entry narrows (width axis, 0 to 38).
`GUTTER`	script.js	`12`	The space between the guide and the lined-up entries, in pixels.

Try them in the Playground

When to use it

For the full-page menu of a studio, a photographer or a magazine, for the index of a portfolio with a few sections, for a contact page with four or five ways in: where the entries are few, short and big, and the empty space is part of the design. With more than seven entries or long ones the page fills up and the effect is lost.

On phones

The same animations with the sizes adapted: the menu is as wide as the screen and the entries smaller. Touching the menu the guide opens under the finger and follows it while dragging, sideways and up and down; lifting the finger the entries stay lined up a moment, then go back. The hint at the bottom says Touch the menu and slide.

With reduced motion

No springs, no running and no narrowing letters: the guide fades in and stays under the pointer, the entries that line up reappear already in place on the guide with a short fade and take weight; leaving, they fade back in on their own guides. When the page opens everything fades in already in place.

Pitfalls

The vermilion guide, above the entries, cut through the words not lined up that passed under it, like a strike-through: with z-index the guide stays behind the entries, and the letters cover it.
All flush on the right of the guide, the long entries went out of the menu when the guide stood on the right. Past sixty per cent of the width they rest on the other side; the way back is under forty, otherwise at the border they would change side at every pixel.
Weight and width change the word's size every frame: for the entries resting on the left of the guide the width has to be read again before writing, otherwise the word that takes weight runs over the guide.
With the same spring for all, the lined-up entries followed the guide as a single block. A softer spring for each row of distance makes them arrive late, like a flag.
The previews' pilot sends pointerleave events that bubble from every element it leaves: the real exit is found from the menu's band of height and, for the page, from a pointerout with no relatedTarget outside the window.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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