Build interactive balloon animations that respond to touch, using Rive's runtime and Scripting API inside a SwiftUI app. The result runs natively on iOS with smooth 60fps animations that feel right on device.
Prerequisites
- Xcode 15+
- Rive app (for creating/editing the animation)
- Rive Swift package or SPM dependency
- Basic SwiftUI and Swift familiarity
What you'll build
A phone-sized view with floating balloons that react when tapped. Each balloon uses a Rive animation with state driven by Rive Scripting. SwiftUI hosts the Rive view and passes touch/gesture data into the runtime.
1. Create the Rive animation
In Rive, design a balloon with idle and "popped" or "tapped" states. Use Rive Scripting to add interactive logic (e.g. onPointerDown, increment counters, trigger state machine inputs). Export the .riv file for use in your iOS project.
2. Add Rive to SwiftUI
Add the Rive Swift package to your project. Create a SwiftUI view that wraps RiveView and loads your .riv file. Ensure the view receives tap gestures and forwards them to the Rive runtime so your Scripting logic can respond.
3. Wire up interactions
Use Rive's runtime APIs to fire inputs or set numbers from Swift when the user taps. Your Rive Script can read these and update animation state. The video above shows the final result: balloons that feel responsive and native on the phone.
The Rive Script
Prompt used: "Red Balloons: Float up, collect at top, tap to pop!" — Here's the full Rive Scripting code that powers the balloons:
Key parts: drawBalloonBody (teardrop shape), drawString (swaying string), pointerDown (tap-to-pop), and advance (float, collide, collect at top).