SwiftUI animation example
SwiftUI Button Animation: Press and Hold to Confirm
Hold-to-confirm prevents accidental taps on actions like "Delete account" without adding a dialog. Press this button and a progress fill runs across it while the button shrinks slightly under your finger. Let go early and the fill drains back on a spring; hold for the full duration and it bursts into a confirmed state.
- 4.1 KB file
- 5 live inputs
- SwiftUI runtime
How this hold to confirm button works
- While pressed, fill progress increases at 1 / hold seconds; on release it springs back to zero.
- The button scales to 96% under the press, matching how iOS buttons respond to touch.
- Reaching 100% fires "confirm" and shows the done label for 1.5 seconds.
Add it to your SwiftUI app
Install ExodeUI (Swift Package), download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import SwiftUI
import ExodeUI
// Add swiftui-button-animation.exode to your app target (download it below).
struct SwiftuiButtonAnimationView: View {
@StateObject private var controller = ExodeUIController()
private let json = (try? String(contentsOf: Bundle.main.url(forResource: "swiftui-button-animation", withExtension: "exode")!)) ?? "{}"
var body: some View {
ExodeUICanvas(
artboardJson: json,
fit: "Layout",
controller: controller,
onReady: { },
onTrigger: { name, _ in
// fires: 'confirm'
}
)
.frame(height: 400)
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
label | Text | Hold to delete | — |
done | Text | Deleted | — |
hold | Number | 1.2 | 0.4 – 3 |
accent | Text | #ff3b30 | hex colour |
bg | Text | #0b0b0d | hex colour |
Events: confirm
More SwiftUI animations
Activity Rings LoaderThree concentric arcs chasing each other like Activity rings, closing into full rings with a check when done.Shimmer Reveal TextA headline whose words rise and focus in one by one, with a periodic shimmer across the gradient text.Context Menu PopLong-press a card to lift it, dim the background and spring an iOS-style context menu open beside it.Mesh Gradient BackgroundA living mesh-style gradient of drifting color points that bend toward your touch.Tilt Parallax PosterA poster card that tilts toward the pointer while its layers separate in depth under a moving glare.Spring Response ComparisonThree springs (snappy, smooth, bouncy) racing the same distance so response and bounce are easy to compare.
The same idea in other frameworks: React liquid fill button · Flutter speed dial fab · Flutter animated login form