Advanced Rive Integration with 3D Image Sequences

This project demonstrates advanced Rive integration, focusing on two non-linear complexities: the image sequence playback and the mobile UI navigation. My goal was to prove the full power of Rive's Data Binding feature to handle complex, non-linear control of pre-rendered 3D image sequence sections, while simultaneously managing the non-linear routing between the major application screens (like Profile, Stats, and Health) driven by the bottom navigation bar. We begin with the model:

The model and it's actions (Idle, Running, Jumping Jacks, Walking) were created in Cinema 4D and rendered as a 295-frame image sequence. This sequence, after conversion to webp, was then imported into Rive, preserving visual quality while ensuring fast animation performance.

We're in Rive! To manage the athlete's complex movement sequence efficiently, the 295 pre-rendered frames were imported and stacked inside a Solo component in Rive. This Solo acts as the visual source for the animation. The crucial step involved Data Binding: we wired the Solo's selection property to a Number input on a ViewModel. This allows the host application to feed the current frame number (from 1 to 295) directly into Rive, dictating which image is displayed. This Number input is then controlled by the State Machine logic, which handles all non-linear actions (Idle, Run, Jump, etc.) to ensure the image sequence plays and loops correctly based on user interaction.

Now, the UI. The bottom navigation bar demonstrates clean micro-interaction logic across its three icon components (Profile, Stats, Health). Each component has two primary animation states: an {icon}_idle state (the default or non-selected look) and an {icon}_in state (which plays the color change and/or micro-animation when selected).

The full application flow is orchestrated through three major screen components: Profile, Stats, and Health. Each screen is managed by three distinct Rive States: the {screen} state (the final, fully visible and interactive screen), the {screen}_in state (the entry animation), and the {screen}_out state (the exit animation). The core State Machine manages the non-linear routing between these screens, using transitions that ensure

This complete architecture demonstrates Rive's animation capabilities and its role as a powerful UI orchestration engine. By combining external 3D assets with advanced Data Binding and complex non-linear State Machine logic, we deliver a highly performant, visually cohesive, and easy-to-maintain application feature. To see this multi-layered animation, navigation, and data control structure in action, and to examine the State Machines yourself, please visit this project on the Rive Marketplace: https://rive.app/marketplace/24741-46269-3d-image-sequences-and-data-binding/

Thank you!