How to Keep Motion Consistent Across React, iOS and Android
Achieve identical UI animation across web and native platforms: translating spring equations between React, SwiftUI, and Jetpack Compose.
Core Takeaway
To keep UI motion consistent across React, iOS (SwiftUI), and Android (Jetpack Compose), unify motion definitions into mathematical spring physics parameters (stiffness, damping, mass) rather than platform-specific duration curves. Store these in platform-agnostic design tokens or use an open runnable interactive format like .exode that plays through native runtimes across all target platforms.
The platform divergence trap
Each major software platform historically favored different animation models: the web used CSS cubic-bezier transitions, iOS adopted CASpringAnimation and SwiftUI springs, and Android evolved through ValueAnimator and Compose spring physics. When each platform implements motion independently, the brand experience fractures.
Mathematical spring translation
Fortunately, physical spring equations are universal across platforms when parameterized by stiffness (k), damping (c), and mass (m). Translating between SwiftUI's response/dampingRatio and Compose's stiffness/dampingRatio is a straightforward mathematical mapping.
- Standardize on physical spring parameters (stiffness, damping, mass)
- Maintain platform-agnostic motion design tokens in JSON format
- Map velocity vectors consistently when handling touch gestures
- Use single-source interactive formats with dedicated native runtimes
Handling platform gesture conventions
While physics parameters can be identical, platforms differ in gesture expectations. iOS users expect full-screen interactive swipe-to-back with rubber-banding, while Android users rely on predictive back navigation. Adapt container gestures to native conventions while keeping component micro-interactions unified.
The single-file interactive runtime solution
ExodeUI addresses cross-platform consistency by storing interactive states, springs, and event logic in a single open .exode JSON file. Dedicated runtime packages for React, Vue, Svelte, Angular, Solid, React Native, SwiftUI, and Flutter render the exact same interactive behavior across all ecosystems.
Key Principles to Remember
- Unify motion systems using physical spring equations rather than bezier curves
- Store shared motion tokens in cross-platform JSON formats
- Respect platform navigation conventions while preserving component micro-motion
- Leverage unified runtime engines to run identical animation files across platforms
Frequently Asked Questions
Sources
- SwiftUI Animation Documentation — Apple Inc.
- Jetpack Compose Animation Spec — Google Android Developers