The needle gauge
Counters, Physics, SVG
NewFree
All components
Before and after
The same farmhouse drawn twice, in pencil and painted: the painting covers the sketch from an edge as rough as a brushstroke, which moves where you drag it on a spring and ripples like wet paint as it runs, with the handle leaning with the speed.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Before and after</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/schibsted-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- before and after: the same farmhouse drawn twice, in pencil and painted. Dragging the handle (or pressing
anywhere on the picture) the painting spreads over the sketch with a brushed edge that ripples while it runs
and settles on a spring. The scene is drawn by the script, twice -->
<figure class="ba" data-ba data-autoclic>
<svg class="ba__art" viewBox="0 0 600 420" aria-hidden="true" data-art>
<defs>
<pattern id="ba-hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(38)">
<line x1="0" y1="0" x2="0" y2="6" stroke="#5b564c" stroke-width="0.9" stroke-opacity="0.55"/>
</pattern>
<clipPath id="ba-cut"><path data-cut/></clipPath>
</defs>
<g data-sketch></g>
<g clip-path="url(#ba-cut)" data-paint></g>
<path class="ba__edge" data-edge/>
</svg>
<span class="ba__tag ba__tag--before" aria-hidden="true" data-before>Sketch</span>
<span class="ba__tag ba__tag--after" aria-hidden="true" data-after>Painting</span>
<div class="ba__handle" role="slider" tabindex="0" aria-label="How much of the painting shows" aria-valuemin="0" aria-valuemax="100" aria-valuetext="" data-handle>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 7 4.5 12l5 5M14.5 7l5 5-5 5"/></svg>
</div>
<figcaption class="ba__caption">The farmhouse, from the first sketch to the painting.</figcaption>
</figure>
</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
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 “Before and after” from Animorio and fit it into my siteWhat it does
On a white background a picture with rounded corners: on the left the pencil drawing, on ivory paper, of a farmhouse among hills, vine rows, cypresses and a road, with the clouds outlined and the roofs and cypresses hatched; on the right the same scene painted, a blue sky fading into warm light, green hills, an ochre house with a red roof; between them an edge as rough as a brushstroke, with a round white handle on it, and in the corners Sketch and Painting. When the page opens the painting comes in from the right to the middle. Dragging the handle, or pressing anywhere on the picture, the edge goes there on a spring: as it runs it ripples like wet paint and the handle leans with the speed, then straightens; the names in the corners fade as the edge comes near them. Below, The farmhouse, from the first sketch to the painting.
How it works
One scene, twice
The scene is a list of shapes (sky, clouds, hills, vine rows, house, cypresses, road) and each says how it is painted and how it is drawn in pencil: with a plain colour in the painting, and in the drawing with the paper’s colour and an outline, an outline alone, or a hatching made with an SVG pattern of slanted lines. The script draws it once for each layer.
The rough edge
The painting is cut by a clipPath running from the edge to the right side. The edge is a line of points every 6 pixels: their x is the position plus a fixed roughness (three waves of different lengths, ROUGH high) plus a ripple that grows with the speed (WOBBLE) and runs over time; a barely visible dark line marks its outline.
The spring
The edge goes towards the point wanted on a spring (SPRING), worked out on GSAP’s ticker in steps of 4 milliseconds: pressing on the picture it glides there, and a moment later it stiffens and follows the hand closely; let go, it goes back to the soft spring.
The handle and the names
The handle sits on the edge and leans by −speed · 0.025 degrees, up to 20, then straightens with the spring; the two names in the corners fade over the last 90 pixels before the edge reaches them.
Keys and the preview
The handle is a slider (role slider): the arrows move the edge by 5 per cent, with Shift by 20, Home and End go to the ends, and aria-valuetext says how much of the painting shows. A click from a script on the picture (the library’s preview) sends the edge somewhere else.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
START | script.js | 0.5 | Where the edge rests when the page opens: 0 is all painting, 1 all sketch. |
SPRING | script.js | [140, 0.62] | The edge’s spring: how stiff it is and how much it is held back. |
WOBBLE | script.js | 0.022 | How much the edge ripples with its speed. |
ROUGH | script.js | 4 | How rough the edge is at rest, in pixels. |
When to use it
For showing a restoration or a renovation, a project before and after, a photo retouch, a rendering next to the building site, a sketch next to the finished work.
On phones
The picture takes the width of the screen; a finger drags sideways while the page can still scroll up and down (touch-action: pan-y), and a tap brings the edge to that point.
With reduced motion
The edge goes straight where it is taken, without spring or ripples, the handle does not lean and the painting does not come in when the page opens: it is already halfway.
Pitfalls
- The straight edge of a rectangular clip-path gives the trick away: here the cut is a path with points every 6 pixels, rough at rest and rippling on the move.
- CSS variables do not work in SVG attributes: the paper and pencil colours of the drawing are given as styles, not as fill and stroke attributes.
- Following the hand with the same soft spring as a click would give an edge lagging behind the finger: held, the spring becomes four times stiffer and nearly bounceless.
- A hatching made of real lines would have to be cut shape by shape: an SVG pattern of slanted lines fills any shape by itself.
Libraries
GSAP 3.15.0, Schibsted Grotesk (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.5 KB; the libraries: GSAP 28 KB.
Testing
Tested on 3 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.
