The guitar built on scroll

Scroll, SVGGSAPAdvancedCompressed weight: Demo 16 KBGSAP + ScrollTrigger 45 KBLenis 5.3 KBFreeDownload the zip

Scroll inside the preview

The header of a made-up guitar workshop, in the rich style: as you scroll, on the workbench in front of the pegboard wall with its tools, a spruce board becomes an acoustic guitar. The jigsaw cuts the body along the template and throws sawdust, the router inlays the rosette ring by ring, the mahogany neck slides in and the frets drop one by one, then the tuners, the bridge and the pickguard, the sunburst spray and the polish, the six strings pulled up to the tuners as they turn; at the end the guitar is strummed and the title arrives. The strings can be plucked with the pointer or a finger.

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 guitar built on scroll</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up guitar workshop, Halden Guitars. The stage sticks while you scroll: on the bench a spruce board is cut
       into a body, the rosette is inlaid, the neck slides in and the frets drop one by one, the tuners and the bridge go
       on, the sunburst is sprayed and polished, the strings are pulled tight and at the end the guitar is strummed.
       Everything is SVG drawn by the script -->
  <main>
    <section class="bottega" data-bottega>
      <div class="palco" data-palco>
        <svg class="scena" data-scena aria-hidden="true"></svg>

        <header class="testata">
          <p class="marchio">
            <svg viewBox="0 0 32 32" aria-hidden="true">
              <path class="marchio__corpo" d="M11 4.5c-3 0-4.6 2.2-4.6 4.8 0 1.7.8 2.9.8 4.3 0 1.4-2.7 2.6-2.7 7.2C4.5 25.6 7.7 28 12 28s7.5-2.4 7.5-7.2c0-4.6-2.7-5.8-2.7-7.2 0-1.4.8-2.6.8-4.3 0-2.6-1.6-4.8-4.6-4.8Z"/>
              <circle class="marchio__buca" cx="12" cy="17.5" r="2.4"/>
              <path class="marchio__manico" d="M15.6 12.8L26.5 3.5l1.6 1.8-10.9 9.3Z"/>
            </svg>
            <span data-brand>Halden</span>
          </p>
          <p class="sotto">Handmade acoustic guitars</p>
        </header>

        <div class="fase-box" data-fase-box>
          <p class="fase" data-fase><span class="fase__nome" data-fase-nome>The board</span><span class="fase__nota" data-fase-nota>Alpine spruce, seasoned ten years</span></p>
          <p class="ore"><span class="ore__etichetta">Bench hours</span> <span class="ore__numero" data-ore>0</span></p>
        </div>

        <div class="finale" data-finale>
          <p class="finale__sopra">Built to order</p>
          <h1 class="finale__titolo">Built by hand. <em>Tuned by ear.</em></h1>
          <p class="finale__testo">One guitar at a time, from the board to the first chord, in a small workshop by the river.</p>
          <a class="tasto" href="#" data-tasto><span>Order a guitar</span></a>
        </div>

        <p class="cenno" data-cenno>
          Scroll to build
          <svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
        </p>
      </div>
    </section>

    <section class="dopo">
      <p class="dopo__marchio">Halden Guitars</p>
      <h2 class="dopo__titolo">Twelve guitars a year.</h2>
      <p class="dopo__testo">Every one is cut, braced, sprayed and set up on the same bench. Pass by on Saturdays and play one.</p>
    </section>
  </main>

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

37 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 guitar built on scroll” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

In front of a workshop’s pegboard wall, with the saw, the chisels, the template, the clamp, the ruler, spare strings and the shelf of jars, a green lamp lights the walnut bench. On the cradle lies a spruce board with its grain. As you scroll, the jigsaw follows the template line all the way round and throws sawdust: the board drops away and the body stays, with its bone-coloured binding. The router spins and cuts the soundhole, and the rosette arrives one ring at a time, red, green and bone. The mahogany neck slides in from the right with a bounce, then nineteen nickel frets drop one after another with a little snap, and the pearl dots pop up at the third, fifth, seventh, ninth, twelfth, fifteenth and seventeenth fret. The six tuners screw in, then the nut, the bridge with its pins and the tortoiseshell pickguard. A spray gun passes back and forth laying the sunburst, from the amber heart to the dark edges, and a strip of light polishes the body. The six strings, three bronze and three steel, are pulled from the bridge to the tuners, which turn as they tighten. At the end the guitar is strummed, rings of sound come out of the soundhole and the title arrives with the button; then a strum now and then. Moving the pointer or a finger across the strings plucks them and they ring.

How it works

One number, how far the work has got

The scroll scrubs an object from 0 to 1. Each stage of the build is a stretch of that number (the cut from 0.05 to 0.2, the rosette from 0.21 to 0.31 and so on) and each part reads only its own stretch: scrolling back takes the guitar apart the same way.

Cutting along the drawing

The body outline is an SVG path: the jigsaw sits at the point getPointAtLength gives for the cut length, and the line draws itself behind it with stroke-dasharray. When the cut is done the board drops and fades, and the body stays.

Frets at the right distance

The nineteen frets sit where a luthier would put them: each fret takes off a twelfth of an octave, so the distance from the nut is the scale times 1 minus 2 to the minus n twelfths. They drop from the twelfth towards the body with back.out, staggered.

Strings that ring

Each string is a path from the bridge to the nut and on to the tuner, with a quadratic curve in the middle: the vibration moves the control point with a damped sine. A second, fainter string, pushed the other way, shows the amplitude. The pointer plucks a string when it crosses to the other side of its line.

Time on its own

The sawdust, the spray mist, the dust in the light, the swaying lamp and the ringing strings run on the GSAP ticker; the sawdust’s gravity follows the guitar’s rotation, so it always falls towards the bench.

Values to change

Name	File	Default	What it changes
`BRAND`	script.js	`'Halden'`	The workshop’s name in the header and on the headstock.
`SCREENS`	script.js	`6`	How long the build lasts, in screens of scroll.
`SAWDUST`	script.js	`1`	How much sawdust the jigsaw throws, from 0 to 2.
`RING`	script.js	`1`	How long the plucked strings ring: 0.5 short, 2 long.
`STRUM`	script.js	`3.6`	Seconds between one strum and the next once the guitar is finished.
`LAMP`	script.js	`1`	How strong the lamp’s light cone is (0 off).

Try them in the Playground

When to use it

For the header of a luthier’s workshop, a musical instrument shop, a music school or a woodworking shop; to tell how a handmade product is made, from the raw material to the finished piece, as you scroll.

On phones

The same animation with adapted sizes: on a narrow screen the guitar stands upright on its stand, with the tools at the sides, and at the end it lies down on the bench under the title, which moves to the top and centre. The strings are plucked with a finger.

With reduced motion

No continuous build, no sawdust, mist, vibration or smooth scrolling: the build is split into still moments (the board, the body, the rosette, the frets, the tuners, the finish, the strings, the title) that fade one into the next as you scroll.

Pitfalls

A zero-length stroke-dasharray dash with a round cap still draws a dot: strings not yet fitted must be hidden with opacity.
When the guitar is rotated (standing up on the phone) the sawdust’s gravity must be turned into the guitar’s coordinates, or the sawdust falls sideways.
To pluck the strings with the pointer you need its position in the guitar’s coordinates: getScreenCTM().inverse() on the group, which accounts for translation, rotation and scale.

Libraries

GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Outfit (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 16 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.

Testing

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