SwiftUI animation example
SwiftUI Menu Animation: Context Menu Pop-Up
iOS context menus have a distinctive feel: the item you press lifts toward you, everything else blurs and dims, and the menu springs open from the item's corner. This recreates that sequence so you can use it for your own menus or see each part slowed down and adjustable.
- 4.6 KB file
- 4 live inputs
- SwiftUI runtime
How this context menu pop works
- Pressing for 350 ms commits the menu; a short tap only nudges the card.
- The card scales to 1.05 while the background darkens; the menu grows from the card's corner on a spring.
- Choosing an item fires "select" and closes the menu in reverse.
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-menu-animation.exode to your app target (download it below).
struct SwiftuiMenuAnimationView: View {
@StateObject private var controller = ExodeUIController()
private let json = (try? String(contentsOf: Bundle.main.url(forResource: "swiftui-menu-animation", withExtension: "exode")!)) ?? "{}"
var body: some View {
ExodeUICanvas(
artboardJson: json,
fit: "Layout",
controller: controller,
onReady: { },
onTrigger: { name, _ in
// fires: 'select'
}
)
.frame(height: 720)
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
items | Text | Reply,Forward,Copy,Pin,Delete | — |
accent | Text | #0a84ff | hex colour |
ink | Text | #f5f5f7 | hex colour |
bg | Text | #1c1c1e | hex colour |
Events: select
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.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 morphing hamburger menu · Flutter 3d drawer menu · Flutter morphing icons