The slide-to-confirm button

Buttons, Physics, TransitionsGSAPMediumCompressed weight: Demo 4.9 KBGSAP 28 KBFreeDownload the zip

A knob to drag to the end of its track to confirm a payment: a green trail follows it and it stretches with the speed of the hand; let go too early it runs back, at the end the track turns green and the arrow becomes a tick.

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 slide-to-confirm button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sora@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button: a knob to drag to the end of its track. Let go too early and it runs back; at the end the track
         fills up green and the arrow turns into a tick. A plain click only nudges it; Enter or Space slides it all
         the way by itself -->
    <div class="slide" data-slide>
      <span class="slide__fill" aria-hidden="true" data-fill></span>
      <span class="slide__label" aria-hidden="true" data-label>Slide to pay <b data-amount></b></span>
      <span class="slide__done" aria-hidden="true" data-done>Payment sent</span>
      <button class="slide__knob" type="button" data-knob data-autoclic>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path class="slide__arrow" data-arrow d="M4.5 12h14M13 6l6 6-6 6"/><path class="slide__tick" data-tick d="M5 12.5l4.6 4.6L19 7.6"/></svg>
      </button>
    </div>
    <p class="sr" role="status" aria-live="polite" data-said></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.

17 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 slide-to-confirm button” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a black background a dark track with a white knob on the left, an arrow on it, and the words Slide to pay €49. Dragging the knob, a green trail follows it from the start of the track, the words fade and drift away as it moves on, and the knob stretches and thins the faster the hand goes. Let go before 85% of the way it runs back to the start and knocks against it with a little jolt; at the end, or let go past 85%, the track is all green, the arrow runs off to the right, the knob turns black, swells for a moment and a green tick draws itself on it, and the words Payment sent come in from the left. A plain click pushes the knob a little forward and lets it come back, to show what to do; Enter or Space slide it all the way by itself. At rest the knob peeks forward every four and a half seconds. In the demo, after a moment, everything goes back to the start.

How it works

One number

Everything comes from how far the knob is, in pixels: it becomes its x, the width of the trail (up to the knob’s far edge, hidden at rest) and the fade of the words, which are gone a little past halfway.

The drag

The knob is a button: on pointerdown the pointer is captured (setPointerCapture), so the drag goes on outside the knob too, and its x follows the hand, kept between the start and the end of the track. The track has touch-action: pan-y and the knob none: on a phone the finger drags the knob and the page still scrolls up and down.

The stretch

On every frame it looks at how far the knob moved since the frame before: the faster it goes, the more it widens and thins, up to STRETCH. The shape moves towards the right one a little at a time, and once let go it rounds out again with elastic.out.

Letting go, and the end

Let go below DONE_AT it runs back to zero in BACK seconds with power3.out, and when it touches the start it squashes and bounces. Above DONE_AT, or touching the end, the knob reaches the end, the arrow leaves, the knob turns black, the tick draws itself with stroke-dashoffset and the words of the end come in; the knob gets aria-disabled and a line for screen readers says the payment has gone.

Click, keyboard and waiting

A click also comes after a drag: that one is ignored. A mouse click or a tap (detail 1) only give a push; one from the keyboard or from a script (detail 0) slides the knob by itself in AUTO seconds. At rest a smaller push comes every NUDGE seconds.

Values to change

Name	File	Default	What it changes
`AMOUNT`	script.js	`'€49'`	What the slide pays.
`DONE_AT`	script.js	`0.85`	How far the knob must be when let go to confirm, from 0 to 1.
`BACK`	script.js	`0.55`	The seconds of the knob running back when let go too early.
`AUTO`	script.js	`0.8`	The seconds of the slide the knob does by itself (Enter, Space).
`STRETCH`	script.js	`0.16`	How much the knob stretches when dragged fast.
`NUDGE`	script.js	`4.5`	The seconds between two little pushes of the knob at rest; 0 for none.
`HOLD`	script.js	`2.4`	The seconds the end stays before the demo starts over.

Try them in the Playground

When to use it

To confirm something there is no going back from, where a wrong click would cost: a payment, an order, a booking, deleting an account. It works best on a phone, with the thumb.

On phones

The track narrows to the width of the screen, up to 380 pixels. The finger drags the knob and the page still scrolls vertically; a tap without dragging gives the push.

With reduced motion

The knob still drags but does not stretch; let go early it goes back to the start at once, Enter takes it to the end at once, the end appears without drawing itself and there are no pushes at rest.

Pitfalls

After a drag the browser also sends a click: it must be recognised and ignored, or a drag let go halfway would turn straight into a push. On a phone that click sometimes does not come, so the mark is cleared at the next touch.
With a click from the keyboard the detail field is 0, with the mouse 1 or more: that is how the same click slides the whole way from the keyboard and only pushes with the mouse.
At rest the trail is hidden: even covered by the knob, its edge would make a green thread around the circle.
The knob’s shape is written by hand on every frame: a GSAP quickTo on the same properties as another tween breaks (scaleX not eligible for reset), and here an elastic bounce at the end is needed too.

Libraries

GSAP 3.15.0, Sora (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 4.9 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.