Rive Blog
State machines make iteration a breeze
Rive’s State Machine makes it easy for designers to iterate without requiring devs to re-implement each version.
Updated as of 8/29/25 for Data Binding
Visual state machines let designers build interactive components that actually work. They're not mockups or prototypes; they're functional assets ready to ship.
In the Rive Editor, designers define parameters via Data Binding using a View Model. When a bound property changes, whether through a listener, code, or no-code tools like Framer, the state machine evaluates the logic and displays the correct state.
Iterating on a loading component
For example, this loading animation is driven by two bound properties: isDownloading (Boolean) and progress (Number, 0-100).
When isDownloading is true, the graphic animates through a sequence to show that a download has begun.
As progress increments from 0 to 100, the water level rises.
When progress reaches 100, the sequence completes.
At runtime, developers simply bind to those View Model properties and update them. Nothing else changes. The design team can freely iterate on visuals, animations, states, layers, transitions, and listeners; as long as the bindings remain the same, the design works seamlessly with no extra dev work.
In our updated example, a tree gradually grows along the path as loading progresses. The isDownloading and progress properties continue to drive the behavior even though everhthing from animations to transitions changed.
Why this matters
Designers can continue refining interactions without involving engineers. On the engineering side, nothing has to change. Just swap in the updated .riv file, and the new version works flat out of the box.
Without state machines and Data Binding, every iteration could require code changes that often delay or scrap creative interactions. With this approach, Rive, makes it effortless for designers and developers to work in harmony.
🧑🎨 How we created a star rating component using Rive's State Machine.
📺 Animation mixing video. The State Machine can do more than just play one animation at a time – it can blend and mix multiple animations at the same time.
📖 Runtime documentation. You can control more than just state machine inputs with code. Read our documentation to see what's possible with our runtime API.
Updated as of 8/29/25 for Data Binding
Visual state machines let designers build interactive components that actually work. They're not mockups or prototypes; they're functional assets ready to ship.
In the Rive Editor, designers define parameters via Data Binding using a View Model. When a bound property changes, whether through a listener, code, or no-code tools like Framer, the state machine evaluates the logic and displays the correct state.
Iterating on a loading component
For example, this loading animation is driven by two bound properties: isDownloading (Boolean) and progress (Number, 0-100).
When isDownloading is true, the graphic animates through a sequence to show that a download has begun.
As progress increments from 0 to 100, the water level rises.
When progress reaches 100, the sequence completes.
At runtime, developers simply bind to those View Model properties and update them. Nothing else changes. The design team can freely iterate on visuals, animations, states, layers, transitions, and listeners; as long as the bindings remain the same, the design works seamlessly with no extra dev work.
In our updated example, a tree gradually grows along the path as loading progresses. The isDownloading and progress properties continue to drive the behavior even though everhthing from animations to transitions changed.
Why this matters
Designers can continue refining interactions without involving engineers. On the engineering side, nothing has to change. Just swap in the updated .riv file, and the new version works flat out of the box.
Without state machines and Data Binding, every iteration could require code changes that often delay or scrap creative interactions. With this approach, Rive, makes it effortless for designers and developers to work in harmony.
🧑🎨 How we created a star rating component using Rive's State Machine.
📺 Animation mixing video. The State Machine can do more than just play one animation at a time – it can blend and mix multiple animations at the same time.
📖 Runtime documentation. You can control more than just state machine inputs with code. Read our documentation to see what's possible with our runtime API.
Updated as of 8/29/25 for Data Binding
Visual state machines let designers build interactive components that actually work. They're not mockups or prototypes; they're functional assets ready to ship.
In the Rive Editor, designers define parameters via Data Binding using a View Model. When a bound property changes, whether through a listener, code, or no-code tools like Framer, the state machine evaluates the logic and displays the correct state.
Iterating on a loading component
For example, this loading animation is driven by two bound properties: isDownloading (Boolean) and progress (Number, 0-100).
When isDownloading is true, the graphic animates through a sequence to show that a download has begun.
As progress increments from 0 to 100, the water level rises.
When progress reaches 100, the sequence completes.
At runtime, developers simply bind to those View Model properties and update them. Nothing else changes. The design team can freely iterate on visuals, animations, states, layers, transitions, and listeners; as long as the bindings remain the same, the design works seamlessly with no extra dev work.
In our updated example, a tree gradually grows along the path as loading progresses. The isDownloading and progress properties continue to drive the behavior even though everhthing from animations to transitions changed.
Why this matters
Designers can continue refining interactions without involving engineers. On the engineering side, nothing has to change. Just swap in the updated .riv file, and the new version works flat out of the box.
Without state machines and Data Binding, every iteration could require code changes that often delay or scrap creative interactions. With this approach, Rive, makes it effortless for designers and developers to work in harmony.
🧑🎨 How we created a star rating component using Rive's State Machine.
📺 Animation mixing video. The State Machine can do more than just play one animation at a time – it can blend and mix multiple animations at the same time.
📖 Runtime documentation. You can control more than just state machine inputs with code. Read our documentation to see what's possible with our runtime API.
Join our newsletter
Get all the latest Rive news delivered to your inbox.