SwiftUI animation example
SwiftUI Flip Card: Flashcard Deck With Swipe
Flashcard apps combine two animations: the flip that reveals the answer and the swipe that moves on. Here the top card flips with rotation3DEffect-style perspective, and once it is answered you can fling it off screen while the card beneath scales up into its place. The deck loops through your cards.
- 4.4 KB file
- 4 live inputs
- SwiftUI runtime
How this flashcard deck works
- The flip is a spring on a rotation angle, drawn with a cosine width so it looks three-dimensional.
- Dragging tracks the pointer with a rotation proportional to the x offset; past a threshold the card flies away.
- Cards below sit at 94% and 88% scale and grow as the top card leaves; "next" fires per swipe.
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-flip-card.exode to your app target (download it below).
struct SwiftuiFlipCardView: View {
@StateObject private var controller = ExodeUIController()
private let json = (try? String(contentsOf: Bundle.main.url(forResource: "swiftui-flip-card", withExtension: "exode")!)) ?? "{}"
var body: some View {
ExodeUICanvas(
artboardJson: json,
fit: "Layout",
controller: controller,
onReady: { },
onTrigger: { name, _ in
// fires: 'flip', 'next'
}
)
.frame(height: 720)
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
cards | Text | Capital of Japan=Tokyo|Largest planet=Jupiter|H2O is=Water|Speed of light=300,000 km/s | — |
accent | Text | #5e5ce6 | hex colour |
ink | Text | #ffffff | hex colour |
bg | Text | #0b0b14 | hex colour |
Events: flipnext
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 3d flip card · Flutter credit card flip