# Drag to Confirm > A deliberate drag-to-confirm control with a responsive progress trail, release threshold, clear completion state and a two-step button alternative. Canonical: https://gsapvault.com/ui-elements/drag-to-confirm Live demo: https://gsapvault.com/demos/drag-to-confirm/index.html | Property | Value | |----------|-------| | Type | ui-element | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | draggable, micro-interaction, state-transition, keyboard-navigation | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview Give important actions a deliberate final step. Drag the handle across the track and release to confirm; let go early and the control returns to its starting position. A clear threshold cue makes the decision visible before it happens. A two-step button alternative provides the same outcome without a dragging gesture. Confirmed, cancelled, disabled and reset states are included, along with light and dark themes and reduced-motion support. The demo is local: connect its confirmation event to your own release, approval or submission workflow. ## Features - Drag progress with a distinct release-to-confirm cue - Short drags and cancelled gestures return to idle - Two-step button alternative for keyboard and single-pointer access - Confirmed state prevents duplicate submissions until reset - Disabled state and a reusable reset API - Touch interaction and responsive track sizing - Light and dark themes with reduced-motion support ## Use Cases - Publishing a release after a final review - Approving a completed workflow - Submitting a configuration change - Confirming a deliberate action on touch screens ## Vibe-Code Ready Setup This UI element includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### A deliberate final step The control distinguishes a partial gesture from an intentional confirmation. A visible release cue appears near the end, and the completed state stays in place until your application resets it. ### The same outcome without dragging A standard button offers an explicit second confirmation step, with cancellation and live status feedback. Both input paths report the result through the same integration point. ## Documentation How this UI element works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### What's Included - `index.html`: working demo and component markup. - `assets/style.css`: responsive component styles and two complete themes. - `assets/script.js`: readable source; `assets/script.min.js`: generated compact source. - Idle, dragging, armed, confirmed, disabled and reset states. - A non-drag confirmation path, live status feedback and reduced-motion support. - A short completion settle, drawn checkmark and fading blue edge glow. ### Quick Start **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ **2. Copy the `[data-drag-confirm]` section from `index.html` into your page.** **3. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ ### Using It With Your Own Design Keep the `data-confirm-*` hooks inside each `[data-drag-confirm]` root. Each root is independent. Change the action heading, label copy in the source, and tag to suit the action being confirmed. The demo performs no backend operation; connect the confirmation event to your own application and implement your own server validation. The toolbar and `.stage` layout are demo furniture. Remove them and the global page CSS when integrating; keep the component's positioned track, handle dimensions and `touch-action: none` on the handle. The alternative and Cancel buttons are part of the accessible component, so keep both. ### Options | Attribute | Default | Description | |---|---|---| | `data-threshold` | `0.88` | Fraction of handle travel required before release confirms; clamped to 0.5–1. | | `data-disabled` | `false` | Initial disabled state. Use the API to change it after mounting. | ### Keyboard & Accessibility | Input | Behaviour | |---|---| | Tab / Shift+Tab | Moves through the native action buttons. | | Enter / Space | First activation offers “Confirm release”; second confirms. | | Escape | Cancels an active drag or the button confirmation step. | | Cancel | Returns to idle and restores focus to the alternative button. | The handle is decorative to assistive technology; the native two-step button provides the complete equivalent without dragging. A polite `role="status"` announces instructions, the release threshold and completion. The track's disabled state and native disabled buttons reflect availability. The button remains visible after confirmation. Reduced motion keeps all input paths functional and applies end states immediately. ### How It Works Dragging reveals progress and an explicit release cue. Releasing early, pressing Escape, losing pointer capture or resizing during a gesture cancels it. A completed control ignores additional confirmation attempts until reset. The button path requests a separate second activation before reporting the same outcome. ### Themes Light is the default. Set the theme on the component root in your application: **On your component's opening tag:** _Code snippet omitted: it ships with the download._ The demo sets `data-variant="light"` or `data-variant="dark"` on `` and honours `?variant=dark`. Both use the same markup and script. Re-value `--ground`, `--ground-2`, `--raised`, `--hover`, `--ink`, `--ink-2`, `--ink-3`, `--line`, `--line-strong`, `--accent`, `--accent-ink`, `--accent-wash`, `--shadow`, `--font`, `--radius`, `--radius-sm` and `--radius-xs` to match your product. Keep text contrast at least 4.5:1. ### Customisation - Change `.drag-confirm`'s maximum width to fit your layout; the handle remeasures automatically. - Change `data-threshold` before mounting to adjust the confirmation distance. - Re-value `--confirm-glow` in both theme blocks to customise the completion glow. Reduced motion skips the glow. - Use the state attribute for additional UI feedback, and the event below for application logic. ### Teardown **Before removing a component in your SPA:** _Code snippet omitted: it ships with the download._ This releases pointer capture, removes listeners and observers, and restores the original inline styles and content. ### Requirements - GSAP 3.12+, core only. - A browser with Pointer Events and ResizeObserver. - No framework or build step. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium UI element. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Drag to Confirm](https://gsapvault.com/ui-elements/drag-to-confirm) - [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](https://gsapvault.com/effects) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt