The noise cancelling switch

Toggles, Transitions, PhysicsCanvas, GSAPAdvancedCompressed weight: Demo 8.9 KBGSAP 28 KBFreeDownload the zip

The Noise cancellation switch of a headphones app: the sound runs through the track, the music buried in the noise of the street. Turned on, the silence spreads out of the knob as a wave of colour, and at its edge the noise meets its own mirror image and the two close up together: only the music is left, a clean white wave.

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 noise cancelling switch</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/host-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the noise cancelling switch of a headphones app: the track shows the sound going by. Off, the music is buried
         in the noise of the street; on, the silence spreads out of the knob, the noise meets its own mirror image and
         the two cancel out, and only the music is left -->
    <div class="anc" data-anc>
      <label class="anc__label" for="anc-switch" data-label>Noise cancellation</label>
      <button class="anc__switch" id="anc-switch" type="button" role="switch" aria-checked="false" data-switch data-autoclic>
        <canvas class="anc__sound" aria-hidden="true" data-sound></canvas>
        <canvas class="anc__sound anc__was" aria-hidden="true" data-was></canvas>
        <span class="anc__shade" aria-hidden="true"></span>
        <span class="anc__knob" aria-hidden="true" data-knob>
          <span class="anc__puck" data-puck></span>
        </span>
      </button>
    </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.

20 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 noise cancelling switch” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background the words Noise cancellation and next to them a light grey pill switch with a big white knob. The sound runs through the track: a restless grey line that never sits still, with a slow wave inside it, the music, and on top the noise of the street in gusts. Turned on, the knob snaps to the other end, hits it and bounces a little, growing longer as it runs. Then from the end of the track, round the knob, ultramarine blue spreads towards the other side at a steady speed, like a wave front. At its edge the noise meets its own mirror image, an amber line, with a faint amber lens between the two: they close up on each other and cancel out, and behind the edge only the music is left, a calm white wave that comes forward a little. Turned off, the knob goes back and the noise floods in again from the far end, while the silence shrinks back into the knob. Under the mouse the knob leans towards the other side; pressed, it widens; it can be dragged too, and the silence follows the hand. A click on the words turns it on and off as well.

How it works

A real switch

It is a button with role switch and aria-checked, with its own label for: Enter and Space turn it on and off, so does a click on the words, and its name for screen readers is the words. Inside are two canvases (the sound, and a copy of it for the reduced motion fade), a layer with the track’s inner shadow, and the knob: an element that runs and widens, and inside it a disc that squashes.

The sound

The line has a point every half pixel and is drawn again on every frame. The noise is value noise in two dimensions, along the track and in time, in three octaves (the rumble of the traffic, the voices, the hiss) that run together at FLOW pixels a second and change shape as they go; a fourth, very slow one makes the gusts. The music is a wave and its octave. Towards the ends the height goes to zero and the line’s colour fades out, so the line never shows beside the knob.

The silence and the mirror

The silence is a radius growing from the middle of the knob at SPREAD pixels a second (and shrinking RETURN times faster), reaching all the way to the end of the track on the knob’s side. Inside its front, over BAND pixels, the noise scales from all of it to none: the white line is music plus noise times (1 − g), the amber one is music minus noise times (1 − g), the two mirror images closing up on each other; between them lies a faint amber lens, and their transparency comes from a gradient that follows 4g(1 − g).

The knob on a spring

The knob is a mass on a spring (SPRING, damped below critical) with two walls at the ends: it reaches the end fast, bounces off losing speed (BOUNCE) and squashes on a spring of its own, on the wall’s side. As it runs it grows in width, not with a scale, so its ends stay round. The physics takes four steps a frame, with the time step held to 1/30 of a second.

Hand, keys, mouse

Pressed, the knob widens towards where it would go. Dragged past 5 pixels it captures the pointer, follows the hand on a stiffer spring and the silence follows it; let go, a fast flick decides by its direction, otherwise the half it is in, and the click that follows is ignored. Under the mouse it leans PEEK pixels towards the other side; after a click it stops until the mouse leaves. The focus ring shows for the keyboard, not after a click.

Values to change

Name	File	Default	What it changes
`SPREAD`	script.js	`115`	How fast the silence spreads out of the knob, in pixels a second.
`RETURN`	script.js	`1.5`	How many times faster the noise floods back when it is turned off.
`NOISE`	script.js	`14`	How loud the noise of the street is: the height of its wave, in pixels.
`MUSIC`	script.js	`5`	How loud the music is: the height of the wave that is left, in pixels.
`BAND`	script.js	`30`	How wide the edge is where the noise and its mirror image close up together, in pixels.
`FLOW`	script.js	`34`	How fast the sound runs through the track, in pixels a second.
`SPRING`	script.js	`160`	How hard the spring pulls the knob to its end of the track.
`BOUNCE`	script.js	`0.32`	How much of its speed the knob keeps bouncing off the end (0, no bounce).
`STRETCH`	script.js	`0.11`	How much the knob stretches with its speed.
`PEEK`	script.js	`4`	How far the knob leans towards the other side under the mouse, in pixels.

Try them in the Playground

When to use it

For a setting that changes what is heard or seen: the noise cancelling of headphones, noise suppression in a video call, a focus mode, a filter. The sound running through it says by itself what the switch is for. In a list of settings it is best used for one entry only, the one to make noticed, next to plain switches.

On phones

Same size as on a computer, 140 by 56 pixels, and at 390 pixels the words and the switch still sit on one line. A tap turns it on and off; a finger dragged sideways takes the knob and the silence with it, while up and down the page still scrolls (touch-action: pan-y). No leaning under the mouse, which a finger does not have.

With reduced motion

The sound is a still picture: no flow, no advancing front, no bounce. At a click the old picture fades away over the new one in a little over a quarter of a second, and the knob fades out at one end and back in at the other. Pressed, it does not widen and cannot be dragged; clicks and keys work as always.

Pitfalls

The silence born round a knob still on its way was a blue ring all round it, the very dot with a ring we do not want: now it waits for the knob to reach the end, reaches the end of the track, fades in while it is as small as the knob (and when turned off it fades out sooner, while it is still a pill), and the knob sits 3 pixels from the edge instead of 6, so that moment is a fading hairline.
Stretching with a scale turned the round knob into an egg: now the knob grows in width, and its ends stay round.
Where the wave flattens out towards the ends the line still showed, a flat stub beside the knob: the line’s colour, and the mirror’s, fade to nothing before the curve of the track.
At 210 pixels a second and with an edge 16 wide the noise and the mirror closed up in a couple of frames and could not be seen: the front runs at 115, the edge is 30 wide, and the amber lens between the two lines makes the closing readable even small.
In the calm gusts the noise looked like a share price chart: the gusts no longer drop below 72 per cent and a third octave of hiss keeps the line restless.
The knob written on every frame, even when still, made the styles recalculate: its width and transform are written only when they change.

Libraries

GSAP 3.15.0, Host Grotesk (font variabile) 5.3.0.

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

Testing

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