Designing visuals that reply to real-time information or person enter normally means switching between a number of instruments — one for animation, one other for logic, and one more for implementation. This back-and-forth can decelerate iteration, make small adjustments cumbersome, and create a disconnect between design and conduct.
In case you’ve spent any time with Rive, you recognize it’s constructed to shut that hole. It helps you to design, animate, and add interplay multi functional place — and with options like state machines and information binding, you can also make your animations reply on to variables and person actions.
To show how we use information binding in Rive, we constructed a small interactive undertaking — a gold calculator. The duty was easy: calculate the value of 5g and 10g gold bars, from 1 to six bars, utilizing exterior information for the present gold value per gram. The gold value may be dynamic, sometimes coming from market information, however on this case we used a manually set worth.
Let’s break down how the calculator is constructed, step-by-step, beginning with the structure and construction of the file.
1. File Construction
The structure is constructed for cellular, utilizing a 440×900 px artboard. It’s structured round three structure teams:
- Title with gold value per gram
- Controls for selecting gold bar quantity and weight
- Gold bar illustration
The title part features a textual content structure manufactured from two textual content runs: one holds static textual content just like the label, whereas the opposite is dynamic and related to exterior information utilizing information binding. This permits the gold value to replace in actual time when the info adjustments.
Within the controls part, we added plus and minus buttons to set the variety of gold bars. These are easy layouts with icons inside. Beneath them, there are two buttons to change between 5g and 10g choices. They’re styled as rounded layouts with textual content inside.
Within the state machine, two timelines outline the tab states: one for when the 10g button is energetic, utilizing a stable black background and white textual content, and one other for 5g, with reversed types. Switching between these two updates the energetic tab visually.
The entire value part additionally makes use of two textual content runs — one for the forex icon and one for the overall worth. This worth adjustments primarily based on the chosen weight and amount, and is pushed by information binding.
2. Gold Bar Illustration
The illustration is constructed utilizing a nested artboard with a single vector gold bar. Contained in the calculator structure, we duplicated this artboard to indicate wherever from 1 to six bars relying on the person’s choice.
Since there are two weight choices, we made the gold bar resize visually — wider for 10g and narrower for 5g. To try this, we used N-Slices in order that the sides keep intact and solely the center stretches. The sliced group sits inside a fixed-size structure, and the artboard is ready to Hug its contents, which lets it resize robotically.
Created two timelines to manage bar dimension: one the place the width is 88px for 10g, and one other at 74px for 5g. The swap between them is managed by a quantity variable known as Measurement-gram gold, the place 5g is represented by 0 and 10g by 1 with 1 set because the default worth.
Within the state machine, we related this variable to the 2 timelines (the 10g timeline set because the default)— when it’s set to 0, the structure switches to 5g; when it’s 1, it switches to 10g. This makes the dimensions replace primarily based on person choice with none guide switching. To maintain the transition clean, a 150ms animation length is added.
3. Visualizing 1–6 Gold Bars
To indicate completely different portions of gold bars in the primary calculator structure, we created a tiered construction utilizing three stacked structure teams with a vertical hole -137. Every tier is offset vertically to kind a easy pyramid association, with every thing positioned within the bottom-left nook of the display.
The primary tier accommodates three duplicated nested artboards of a single gold bar. Every of those is wrapped in a Hug structure, which permits them to resize accurately primarily based on the burden. The second tier contains two gold bars and an empty structure. This empty structure is used for spacing — it creates a visible shift when we have to show precisely 4 bars. The highest tier has only one gold bar centered.
All three tiers are bottom-centered, which retains the pyramid form constant as bars are added or eliminated.
To regulate what number of bars are seen, we created 6 timelines in Animate mode — one for every amount from 1 to six. To cover or present every gold bar, two strategies are used: adjusting the opacity of the nested artboard (100% to indicate, 0% to cover) and modifying the structure that wraps it. When a bar is hidden, the structure is ready to a set width of 0px; when seen, it makes use of Hug settings to revive its dimension robotically.
Every timeline has its personal mixture of those settings relying on which bars ought to seem. For instance, within the timeline with 4 bars, we would have liked to forestall the fourth bar from leaping to the middle of the row. To maintain it correctly spaced, we assigned a set width of 80px to the empty structure used for shifting. On the opposite timelines, that very same structure is hidden by setting its width to 0px.
This technique makes it simple to change between portions whereas preserving the visible construction.
4. State Machine and Knowledge Binding Setup
With the visuals and layouts prepared, we moved on to organising the logic with information binding and state transitions.
4.1 Exterior Gold Worth
First, we created a quantity variable known as Gold value gram. This worth may be up to date externally — for instance, related to a buying and selling database — so the calculator at all times exhibits the present market value of gold. In our case, we used a static worth of 151.75, which can be up to date manually by the person.
To show this within the UI, we sure Textual content Run 2 within the title structure to this variable. A converter within the Strings tab known as “Convert to String Worth” is then created and utilized to that textual content run. This converter codecs the quantity accurately for show and will likely be reused later.
4.2 Gold Bar Measurement Management
We already had a quantity variable known as Measurement-gram gold, which controls the burden of the gold bar used within the nested artboard illustration.
Within the Listeners panel, two listeners are created. The primary is ready to focus on the 5g tab, makes use of a Pointer Down motion, and assigns Measurement-gram gold = 0. The second targets the 10g tab, additionally with a Pointer Down motion, and assigns Measurement-gram gold = 1.
Subsequent, two timelines (one for every tab state) are introduced into the state machine. The 10g timeline is used because the default state, with transitions added: one from 10g to 5g when Measurement-gram gold = 0, and one again to 10g when Measurement-gram gold = 1. Every transition has a length of 100ms to maintain the switching clean.
4.3 Gold Bar Amount
Subsequent, added one other quantity variable, Amount-gold, to trace the variety of chosen bars. The default worth is ready to 1. Within the Converters underneath Numeric, two “Calculate” converters are created — one which provides “+1” and one which subtracts “-1”.
Within the Listeners panel, the plus button is assigned an motion: Amount-gold = Amount-gold, utilizing the “+1” converter. This fashion, clicking the plus button will increase the depend by 1. The identical is completed for the minus button, assigning Amount-gold = Amount-gold and attaching the “-1” converter. Clicking the minus button decreases the depend by 1.
Contained in the state machine, six timelines are related to symbolize bar counts from 1 to six. Every transition makes use of the Amount-gold worth to set off the proper timeline.
By default, the plus button would preserve growing the worth endlessly, however the aim is to restrict the max to 6 bars. On the timeline the place six gold bars are energetic, the plus button is disabled by setting its click on space scale to 0 and decreasing its opacity to create a “disabled” visible state. On all different timelines, these properties are returned to their energetic values.
The identical logic is utilized to the minus button to forestall values decrease than one. On the timeline with one bar, the button is disabled, and on all others, it returns to its energetic state.
Virtually there!
4.4 Complete Worth Logic
For the 5g bar value, we calculated it utilizing this system:
Complete Worth = Gold value gram + Amount-gold * 5
In Converters → Numeric, a Components converter was created and named Complete Worth 5g Components to calculate the overall value. Within the instance, it seemed like:
{{View Mannequin Worth/Gold value gram}}*{{View Mannequin Worth/Quanity-gold}}*5.0
Since we would have liked to show this quantity as textual content, the Complete Worth quantity variable was additionally transformed right into a string. For that, we used an present converter known as “Convert to String Worth.”
To make use of each converters collectively, a Group of converters was created and named Complete Worth 5g Group, which included the Complete Worth 5g Components converter adopted by the Convert to String Worth converter.
Then, the textual content for the value variable was information sure by including the Complete Worth variable within the Property area and deciding on Complete Worth 5g Group within the Convert area.
To deal with the 10g case, which is double the value, two choices are explored — both creating a brand new converter that multiplies by 10 or multiplying the present outcome by 2.
Finally, a second textual content ingredient is added together with a brand new group of converters particularly for 10g. This features a new system:
Complete Worth = Gold value gram + Amount-gold * 10
A system converter and a bunch with each that system and the string converter are created and named “Complete Worth 10g Group.”
Utilizing timelines the place the 5g and 10g buttons are of their energetic states, we adjusted the transparency of the textual content parts. This fashion, the overall value related to the 5g converters group is seen when the 5g button is chosen, and the value from the 10g converters group seems when the 10g button is chosen.
It really works completely.
After this setup, the Gold value gram variable may be related to dwell exterior information, permitting the gold value within the calculator to mirror the present market worth in actual time.
Wrapping Up
This gold calculator undertaking is an easy instance, however it exhibits how information binding in Rive can be utilized to attach visible design with real-time logic — with no need to leap between separate instruments or write customized code. By combining state machines, variables, and converters, you may construct interfaces that aren’t solely animated but in addition sensible and responsive.
Whether or not you’re engaged on a product UI, a prototype, or a standalone interactive graphic, Rive offers you a solution to convey collectively movement and conduct in a single area. In case you’re already experimenting with Rive, information binding opens up a complete new layer of potentialities to discover.
