The slide-to-confirm button
Buttons, Physics, Transitions
NewFree
All components
The Newton's cradle loader
A card payment being processed, made as a Newton’s cradle of polished steel on a walnut base: every step of the payment lifts one more ball. One ball swings while the card is authorized, two while the bank verifies it, three while the payment is confirmed, and as many fly out on the other side of the row. The collisions are real physics. At the end the balls slow down and stop, a light runs over them and a tick is drawn; if the bank declines the card the balls go dead at once and Retry appears.
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, viewport-fit=cover">
<title>The Newton's cradle loader</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">
<!-- the Newton's cradle loader: a card payment being processed, shown as a Newton's cradle of polished steel on a
walnut base. Every step of the payment lifts one more ball: one ball swings while the card is authorized, two
while the bank verifies it, three while the payment is confirmed. The balls really collide and pass the blow
along the row. At the end they slow down and stop and a tick is drawn. The cradle is drawn by script.js -->
<section class="pay" aria-labelledby="pay-title" data-pay>
<canvas class="pay__cradle" aria-hidden="true" data-cradle></canvas>
<div class="pay__head">
<div class="pay__words">
<h2 class="pay__title" id="pay-title"><span class="pay__swap" data-title>Ready to pay</span></h2>
<p class="pay__meta"><span class="pay__swap" data-meta>$1,249.00 · Card ending 4242</span></p>
</div>
<p class="pay__figure" aria-hidden="true">
<span class="pay__pct" data-pct></span>
<svg class="pay__tick" viewBox="0 0 28 28" data-tick><path d="M6.5 14.8l5 5 10-11.4" pathLength="1"/></svg>
</p>
</div>
<div class="pay__steps" role="progressbar" aria-labelledby="pay-title" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0" aria-valuetext="Not started" data-bar>
<div class="step" data-step><span class="step__word">Authorizing</span><span class="step__track"><span class="step__fill"></span></span></div>
<div class="step" data-step><span class="step__word">Verifying</span><span class="step__track"><span class="step__fill"></span></span></div>
<div class="step" data-step><span class="step__word">Confirming</span><span class="step__track"><span class="step__fill"></span></span></div>
</div>
<button class="pill" type="button" data-go data-autoclic><span class="pill__label" data-label>Pay $1,249.00</span></button>
<p class="sr" role="status" aria-live="polite" data-live></p>
</section>
</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.
40 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 “The Newton's cradle loader” from Animorio and fit it into my siteWhat it does
On a black background, alone in the middle, a Newton’s cradle: a frame of chrome tubes with two rails at the top, five balls of polished steel each hanging from two thin threads, and a lacquered walnut base with its grain and a light edge. Every ball reflects a bright sky above, the curved horizon and the wood below, with a window of light up on the left; on the base it has its own shadow. Below are the title Ready to pay, the line $1,249.00 · Card ending 4242, three steps (Authorizing, Verifying, Confirming) each with its track, and the white Pay $1,249.00 button. Pointing at the button (or reaching it with the keyboard) moves the first ball aside a little; let go, it goes back into the row and hits it with a small knock. Pressed, the button becomes Processing, light with a ring, the percentage appears on the right and the first ball is lifted and dropped: it hits the row and the last one flies out on the other side, comes back, hits, and so on, while the Authorizing track fills. At every new step, when the lifted balls reach the top of their swing, one more is taken: two balls for Verifying with your bank, three for Confirming the payment, and two and three come out on the other side. Near the end the balls are slowed down and stop gently, a light runs over them from left to right, the three tracks turn green one after the other, a green tick is drawn with a bounce where the percentage was and the title becomes Payment complete. Done brings everything back to rest. Once in two, in the demo, half way through the verification the bank declines the card: the balls lose their bounce, clump together and stop, the red title Card declined shakes, the Verifying track turns red and the button says Retry, which lifts the balls again and carries on from where it stopped. While nothing is being paid, the balls can be pulled with the mouse or a finger and let go.
How it works
Five real pendulums
Every ball is a pendulum with its own angle θ and angular speed ω: θ'' = −(2π ÷ PERIOD)² · sin θ − DRAG · θ'. It is integrated with semi-implicit Euler (the speed first, then the angle) in 14 steps a frame, and a frame’s time never goes past 1/30 of a second, so a tab coming back to the front does not make the balls jump. The real sine is used, not the angle: at large swings the oscillations are a little slower, as in real life. The two threads of every ball start from the two rails, one higher than the other because the cradle is seen from a little above, and meet at the eyelet.
The blow that runs along the row
When two neighbours touch (their centres are less than two radii apart) they exchange an impulse along the line between the centres. For two constrained pendulums, how far a turn of each moves its ball along that line is a = L · (cos θ · nx − sin θ · ny); the impulse is λ = −(1 + e) · v ÷ (a₁²/I + a₂²/I), with v the speed at which they close in and e = BOUNCE. Then the overlap is shared between the two. The balls at rest hang a quarter of a unit apart, so a blow really travels from ball to ball; the contacts are solved three times a step, both ways. No special rule for «two in, two out»: it comes by itself.
One more ball every step
The payment is a GSAP timeline: every step has its share of SECONDS and its percentage (34, 72, 100), slow at the start and at the end like a bank’s answer. When the step changes, the script waits for the lifted balls to reach the top of their swing (θ < 0 and ω going from negative to positive), then holds them, takes one more and brings them all to the step’s angle with a tween; meanwhile the others are braked to rest. After a moment at the top it lets them go. If the balls do not reach the top within 1.6 seconds it takes them anyway.
Steel painted every frame
On a canvas: the base and the back of the frame are painted once into a picture of their own, the front of the frame into another. Every frame the shadows (a soft ellipse that widens and fades as the ball rises), the threads and the balls are painted. Every ball is a dark steel ground, a cap of bright sky, the wood below bent into a bowl whose edge is the curved horizon, the reflection of the base’s light edge, the darker rim, a cool light on the right and the window of light that slides with the ball’s place. When a neighbour comes close, its reflection appears on the side, squashed.
The end, the decline and those who cannot see
At 95% the last balls let go make one more swing, then the drag rises and when they hardly move any more the last sway is eased to zero with a tween: only then is the tick drawn and a band of light runs over the row (lighter). On a decline the bounce drops to 0.15 and the drag rises: the balls clump together and stop. When nothing moves the loop does not paint. The steps are a role=progressbar with aria-valuenow and aria-valuetext («51 percent, Verifying») at most every 0.6 seconds, aria-busy while it works and an aria-live line for every step, the end and the decline. Clicks from a script (the library preview’s) never bring it back to rest: once it is done, after 2.4 seconds, they pay again.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
SECONDS | script.js | 9 | How long the demo’s payment takes, in seconds (a real one follows the bank’s answer). |
SWING | script.js | 28 | How many degrees the first ball is lifted; with two and three balls the angle is a little smaller. |
PERIOD | script.js | 1.15 | How long a whole swing takes, in seconds: the higher it is, the slower the balls go. |
BOUNCE | script.js | 0.985 | How much the balls bounce off each other: 1 they lose nothing, 0.8 they stop soon and move together. |
DRAG | script.js | 0.08 | The air’s drag on the balls. |
FAIL_EVERY | script.js | 2 | In the demo, one payment in how many is declined by the bank; 0 never. |
FAIL_AT | script.js | 0.52 | How far through the payment the decline comes, from 0 to 1. |
LABELS | script.js | { busy: 'Processing', done: 'Done', retry: 'Retry' } | The button’s words while it works, at the end and after a decline; the one at rest, Pay $1,249.00, is changed in index.html. |
WORDS | script.js | { busy: 'Processing payment', done: 'Payment complete', declined: 'Card declined' } | The title while it works, at the end and after a decline; the one at rest, Ready to pay, is changed in index.html. |
NOTES | script.js | ['Authorizing your card', 'Verifying with your bank', …] | The line under the title during the three steps, at the end and after a decline; the one at rest and the steps’ names are changed in index.html. |
When to use it
For a wait of a few seconds where trust matters: a card payment, an instant transfer, an account being verified, a subscription being switched on. The cradle says something is working precisely and without hurry, and the growing number of balls says which step it is at even without reading. It suits a shop for design objects, a finance or office app, where the steel and the walnut go well with the product. For a very short wait, or a loader that comes back often, it is too much.
On phones
The component is at most 380 pixels wide: at 390 it fits in 358, the canvas shrinks with it and paints at the screen’s real density, up to twice, and the balls have the same physics at any size (everything is in drawing units). The words stay on one line. The button is 48 tall and under a finger it squashes and springs back; the ball moving aside on the way past is there only with the mouse and the keyboard. The balls can be pulled with a finger too, sideways: the canvas lets the page’s vertical scroll through.
With reduced motion
The balls stay still in the row: no swinging, no ball moving aside, no pulling, no light at the end and no shake of the title. The payment is read in the words, the percentage and the steps’ tracks, which fill; the words change with a fade, the tracks turn green with no delay and the tick appears without drawing itself.
Pitfalls
- The balls reflected a light grey sky on one half and the brown wood on the other, with a straight horizon: they looked like Christmas baubles half full. The steel is now dark like the black room around it, the sky is only a cap at the top, and the wood is squeezed towards the lower rim, dark, with a single warm line for a horizon.
- At the end of the payment the braking started at 100% and the balls took three seconds to stop, with 100% and Processing stuck on screen: the brake now starts at 95%, after one last swing of the balls just let go, and the tick comes when both the payment and the balls are done.
- With the steps cut into equal shares of eight seconds the three balls came out just before the end: between waiting for the top of the swing and the lift, every change of step costs more than a second. The payment now lasts nine seconds and the third step has more time.
- During the lift the held balls start from different angles and for a moment there is a gap between the second and the third: it closes by itself at the end of the tween, because all of them reach the same angle, and meanwhile the free balls are braked.
- A ball pulled all the way went into the frame’s post: the angle of the balls at the two ends is now limited by where the posts are, both when pulled and while swinging.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 14 KB; the libraries: GSAP 28 KB.
Testing
Tested on 8 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.
