Designing visuals that reply to real-time information or consumer enter often 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 habits.
When you’ve spent any time with Rive, you understand it’s constructed to shut that hole. It allows you to design, animate, and add interplay multi functional place — and with options like state machines and information binding, you may make your animations reply on to variables and consumer actions.
To exhibit how we use information binding in Rive, we constructed a small interactive undertaking — a gold calculator. The duty was easy: calculate the worth of 5g and 10g gold bars, from 1 to six bars, utilizing exterior information for the present gold worth per gram. The gold worth could be dynamic, usually 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 cell, utilizing a 440×900 px artboard. It’s structured round three structure teams:
- Title with gold worth per gram
- Controls for selecting gold bar quantity and weight
- Gold bar illustration
The title part features a textual content structure product of 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 enables the gold worth to replace in actual time when the information 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. Under 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 strong black background and white textual content, and one other for 5g, with reversed types. Switching between these two updates the energetic tab visually.
The overall worth part additionally makes use of two textual content runs — one for the forex icon and one for the entire worth. This worth adjustments based mostly 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 point out anyplace from 1 to six bars relying on the consumer’s choice.
Since there are two weight choices, we made the gold bar resize visually — wider for 10g and narrower for 5g. To do this, we used N-Slices in order that the perimeters keep intact and solely the center stretches. The sliced group sits inside a fixed-size structure, and the artboard is about to Hug its contents, which lets it resize routinely.
Created two timelines to regulate bar measurement: 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 referred to 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 scale replace based mostly on consumer choice with none guide switching. To maintain the transition clean, a 150ms animation period is added.
3. Visualizing 1–6 Gold Bars
To indicate completely different portions of gold bars in the principle calculator structure, we created a tiered construction utilizing three stacked structure teams with a vertical hole -137. Every tier is offset vertically to type a easy pyramid association, with all the things positioned within the bottom-left nook of the display screen.
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 based mostly on the burden. The second tier consists of 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 manage 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 point out, 0% to cover) and modifying the structure that wraps it. When a bar is hidden, the structure is about to a hard and fast width of 0px; when seen, it makes use of Hug settings to revive its measurement routinely.
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 stop the fourth bar from leaping to the middle of the row. To maintain it correctly spaced, we assigned a hard and fast 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 method makes it straightforward 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 Value
First, we created a quantity variable referred to as Gold worth gram. This worth could be up to date externally — for instance, related to a buying and selling database — so the calculator all the time reveals the present market worth of gold. In our case, we used a static worth of 151.75, which can be up to date manually by the consumer.
To show this within the UI, we certain Textual content Run 2 within the title structure to this variable. A converter within the Strings tab referred to as “Convert to String Value” is then created and utilized to that textual content run. This converter codecs the quantity accurately for show and might be reused later.
4.2 Gold Bar Measurement Management
We already had a quantity variable referred to 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 about 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 period 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 about 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 finished 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 characterize 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 maintain rising the worth endlessly, however the purpose 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 stop 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 Value Logic
For the 5g bar worth, we calculated it utilizing this formulation:
Complete Value = Gold worth gram + Amount-gold * 5
In Converters → Numeric, a Formulation converter was created and named Complete Value 5g Formulation to calculate the entire worth. Within the instance, it appeared like:
{{View Mannequin Value/Gold worth gram}}*{{View Mannequin Value/Quanity-gold}}*5.0
Since we would have liked to show this quantity as textual content, the Complete Value quantity variable was additionally transformed right into a string. For that, we used an present converter referred to as “Convert to String Value.”
To make use of each converters collectively, a Group of converters was created and named Complete Value 5g Group, which included the Complete Value 5g Formulation converter adopted by the Convert to String Value converter.
Then, the textual content for the worth variable was information certain by including the Complete Value variable within the Property discipline and choosing Complete Value 5g Group within the Convert discipline.
To deal with the 10g case, which is double the worth, two choices are explored — both creating a brand new converter that multiplies by 10 or multiplying the present outcome by 2.
Ultimately, a second textual content component is added together with a brand new group of converters particularly for 10g. This features a new formulation:
Complete Value = Gold worth gram + Amount-gold * 10
A formulation converter and a gaggle with each that formulation and the string converter are created and named “Complete Value 10g Group.”
Utilizing timelines the place the 5g and 10g buttons are of their energetic states, we adjusted the transparency of the textual content components. This fashion, the entire worth related to the 5g converters group is seen when the 5g button is chosen, and the worth from the 10g converters group seems when the 10g button is chosen.
It really works completely.
After this setup, the Gold worth gram variable could be related to dwell exterior information, permitting the gold worth within the calculator to replicate the present market worth in actual time.
Wrapping Up
This gold calculator undertaking is an easy instance, however it reveals how information binding in Rive can be utilized to attach visible design with real-time logic — without having to leap between separate instruments or write customized code. By combining state machines, variables, and converters, you possibly can construct interfaces that aren’t solely animated but additionally sensible and responsive.
Whether or not you’re engaged on a product UI, a prototype, or a standalone interactive graphic, Rive offers you a strategy to carry collectively movement and habits in a single house. When you’re already experimenting with Rive, information binding opens up an entire new layer of potentialities to discover.
