SwiftUI animation example
SwiftUI Spring Animation: Response and Bounce Compared
SwiftUI's .spring(response:dampingFraction:) and the newer .snappy, .smooth and .bouncy presets are easy to use but hard to picture. This demo runs three springs over the same distance at the same moment, so the differences are obvious: how fast each one gets there, and how much it overshoots.
- 4.2 KB file
- 5 live inputs
- SwiftUI runtime
How this spring response comparison works
- Each ball runs a spring with its own response and damping fraction, shown on its row.
- Response is converted to stiffness the way SwiftUI does it: stiffness = (2π / response)².
- Tap anywhere to send all three to the other side; "start" fires on each run.
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-spring-animation.exode to your app target (download it below).
struct SwiftuiSpringAnimationView: View {
@StateObject private var controller = ExodeUIController()
private let json = (try? String(contentsOf: Bundle.main.url(forResource: "swiftui-spring-animation", withExtension: "exode")!)) ?? "{}"
var body: some View {
ExodeUICanvas(
artboardJson: json,
fit: "Layout",
controller: controller,
onReady: { },
onTrigger: { name, _ in
// fires: 'start'
}
)
.frame(height: 460)
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
response | Number | 0.5 | 0.15 – 1.5 |
accent | Text | #30d158 | hex colour |
accent2 | Text | #0a84ff | hex colour |
accent3 | Text | #ff9f0a | hex colour |
bg | Text | #000000 | hex colour |
Events: start
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.Hold to Confirm ButtonA press-and-hold button: a fill runs while held, drains on early release and confirms when full.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.
The same idea in other frameworks: React shared element transition · React 3d flip card · React spring playground