How to Create a Count-Up Animation in Rive | Data Binding and Property Groups Guide
- Apr 20
- 5 min read
Final Result: Rive Count-Up Animation
In this article, we’ll walk through how to create a count-up animation in Rive using data binding.
Essential Elements
When creating a count-up animation in Rive, the minimum required elements are as follows:
【Artboard】
Text layer
Property group
【Data Binding】
View Model
Number property
Converter
Convert to String property
Step 1: Preparing the Graphic Design
First, we will prepare the graphic elements in the Design tab.
For this example, the artboard size is set to a 500 × 500 pixel square.
Set the artboard color to any color you like.
In this case, I’m using a linear gradient.
Add a text layer.
The displayed text will be set later using data binding, so you can leave it as the default “text”.
If you would like to include a line chart, draw a line using the pen tool.
For the line chart color, remove the default Fill and add a Stroke instead.
Then, add a Trim Effect from the stroke effects.
For better visibility in the Design tab, set the Start value to 100%.
That's all for the graphic design prep!
Step 2: Preparing Data Binding
Next, let's set up the data binding.
By default, a ViewModel called “ViewModel1” is already available, so we will use this.
From the right side of the ViewModel, add a Number property.
The property name can be anything, but for clarity, I named it “textNum”.
Next, add a Converter.
This part can be a bit confusing, as it places in a different hierarchy from the ViewModel.
From the top plus button, add a Convert to Number property in the following order:
Converter > String > Convert to Number
For better clarity later, I renamed the converter to “textNumControl”.
Step 3: Setting Up Data Binding
Now that the graphic design and data binding preparations are complete, we will connect them by setting up data binding.
Go back to the Design tab and select the text layer from the Hierarchy.
In the right panel under Text Runs, right-click on the default “text” field and select Data Bind.
First, set the data binding direction.
Choose the second option from the left, bidirectional.
Next, set the property.
From the list, select the “textNum” property that we added in Step 2.
Then, set the Convert option.
Select “textNumControl,” which was also added in Step 2.
Finally, add a Number property from the plus button.
Right-click on the box containing the value “0” and set up Data Bind.
For the data binding direction, select Target to Source.
For the Property, choose “textNum.”
Why we need a Property Group?
By adding a property group, you can display the numeric variable “textNum” as a count-up animation.
Without a property group, you would only be able to add keyframes directly to the text layer itself.
As a result, the text would simply switch from “0” to “100” instantly.
Because of this, we will need a property group to create a smooth count-up animation.
Step 4: Setting Up the Animation and State Machine
Finally, we will set up the animation.
Switch to the Animation tab, where you will see a default timeline called “Timeline1.” Add keyframes to this timeline.
Select the property group and set a keyframe with the value “0” at the first frame.
This sets the starting point to 0.
Next, move to the 1-second mark and set the end value to “100”.
If you have also added a line chart, add keyframes to the Trim Effect > Start value on the line chart layer.
Set two keyframes so that it animates from 0% to 100%.
●Animation Preview in the Timeline
Press the spacebar on the timeline to preview the animation.
One note is that the property group animation will not play in the timeline.
You will be able to see the trim path animation of the line chart from 0% to 100%, but the text layer will remain as “text” and will not change at this stage.
●Animation Preview in the State Machine
To preview the count-up animation created with the property group, open the State Machine.
By default, it is set so that the animation transitions from Entry to Timeline1.
With this setup, when you play the animation, the timeline animation starts automatically.
Press the spacebar in the State Machine to preview the animation again.
This time, you should see the number counting up from 0 to 100.
How to Hide Decimal Values
In the current count-up animation, decimal values are also displayed.
If you want to hide the decimal values and display only whole numbers, select the converter “textNumControl.”
In the right panel, the Convert to String settings will appear.
Under From a Number, check the option Round Decimals.
When you play the State Machine again in this setting, the count-up animation will display only whole numbers from 0 to 100, without showing any decimal values.
How to Show Decimal Values
On the other hand, if you want to display decimal values, adjust the Round Decimals setting in the Convert to String converter.
If you set it to 1, it will display values up to one decimal place (e.g., 0.1).
If you set it to 2, it will display values up to two decimal places (e.g., 0.01).
By applying this and adding more detailed design elements, you can create more advanced animations like this.
Summary
That’s how you can create a count-up animation in Rive using data binding.
It can be used as a UI animation for websites, and by adding inputs, it can also be applied as a micro interaction that plays on click.
The count-up animation introduced in this article is available on the Rive Marketplace.
If you would like to explore the source file, feel free to check it out and remix my file!
Remixable Rive Source Files (via Rive Marketplace)
[Simple Version] Rive Count-Up Animation Sample
[Advanced Version] Rive Count-Up Animation Sample
If you found this helpful, I would really appreciate it if you could give it a Like (/・ω・)/ ❤
At LITTLE FUJI, Rive animation projects are handled by Ayaka Fuji, a designer certified with the Rive Expert badge.
If you are considering interactive animations that users can engage with, or lightweight UI animations optimized for websites, feel free to get in touch.
