Hold to confirm
Matt Perry
In this tutorial, we're going to build the Hold to confirm example step-by-step.
This example is rated advanced difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Hold to confirm tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Hold to confirm example shows an interactive button that requires a long press to trigger an action. This pattern is commonly used for destructive or important actions, giving users time to reconsider before completing the action.
This example uses several Motion APIs working together. The press function detects when the button is held down, the animate function drives the progress animation, motionValue stores the animation progress, mapValue transforms the progress into different visual properties, and styleEffect automatically updates element styles as the Motion value changes.
The example creates a sophisticated multi-element animation from a single progress value. When you press and hold the button, a circular progress ring draws around it, the button scales down slightly, and a glowing background slides into view. All these animations are driven by one Motion value that updates as you hold the button.
