Scripting
Rive Scripting Tutorial: Make Any Script Responsive with Data Binding
|
7
min read
Full Video Tutorial
Rive scripting lets you build things that Rive's built-in tools can't do on their own - particle systems, procedural effects, dynamic visuals that respond to user input.
But most scripted effects have a problem: they're locked in place. Change the artboard size, and the effect breaks. Want to tweak the speed? Edit the code. Need to adjust the intensity? Edit the code again.
The fix is simple in concept: expose the values that might change as inputs, then connect them to Rive's Data Binding system.
Once you do, the script becomes something you can control from the outside - from the State Machine, from code, or from other properties in the file. No more editing the script every time you need to adjust something.
The Principle: Expose What Might Change
Every scripted effect has values baked into it. Some will never change - the math behind the movement, the logic that spawns or recycles elements. Those can stay in the code.
But some values should change depending on how the script is used. Those are the ones worth exposing as inputs.
The question isn't "what inputs does every script need." It's: what would I want to adjust without touching the code?
The answer depends entirely on the effect:
Particle system? Speed, particle count, and artboard dimensions so the effect scales to different screen sizes.
Path effect distortion? Intensity, speed, and detail level.
Background animation? Maybe just speed and a color value.
Full-screen effect? Artboard width and height are essential.
There's no universal list. The inputs depend on the script.
A Practical Example: Space Travel Effect
To make this concrete, let's look at a space travel effect - stars flying outward from the center of the screen.
For this effect, the inputs that make sense are:
Artboard width and height - the script needs to know where the center is and how far stars need to travel
Speed - control how fast stars move without editing code
Particle count - bigger artboards need more stars, smaller ones need fewer
There's also an artboard component input. Instead of drawing every star inside the script, you pass in a component and let the script spawn it. Swap the component later without changing the code.
These inputs work for this specific effect. A different effect would need different inputs.
The Problem: Inputs Alone Aren't Enough
Setting up inputs gives you adjustable values in the Properties panel. But they're still static.
Set the artboard width and height to 1920 by 1080. Looks great. Now resize the artboard to 500 by 500.
Nothing updates. The stars still spawn as if the artboard is 1920 wide. The center drifts.
The script has inputs for width and height - but they're not connected to the actual artboard.
Connecting Inputs Through Data Binding
Data Binding in Rive works through ViewModels - containers that hold properties and connect different parts of your file.
The process for any script:
Create a ViewModel with properties matching your script inputs
Set default values
Bind your script inputs to the ViewModel properties
Now you can control the script from the Data panel. Change a value, and the script responds instantly.
But there's one more step that most people miss.
Target to Source: The Key Step
The ViewModel controls the script - but who controls the ViewModel?
If your script responds to artboard size, the artboard needs to drive the ViewModel. Not the other way around.
That's what Target to Source binding does. Bind the artboard's width and height to the ViewModel, set the direction so the artboard is the source of truth.
When the artboard resizes, the values flow into the ViewModel, which updates the script automatically.
This same principle applies to any property: a slider, a state machine property, an external data source. The ViewModel connects everything.
Keeping Design Elements Aligned
When the artboard resizes, the script follows the new dimensions. But design elements - a sun, fog layers, background shapes - stay where you placed them.
Add a Transform Constraint to each element that should stay centered. Link it to the artboard, set the origin to 50% on both axes.
The Pattern
Here's the pattern that works for any scripted effect:
Identify what might change - screen size? Speed? Intensity? Colors?
Expose those as inputs
Create a ViewModel with matching properties
Bind script inputs to the ViewModel
Bind the data source to the ViewModel using the right direction
Add Constraints if design elements need to stay aligned
The specific inputs change with every effect. The pattern stays the same.
I cover Data Binding and Rive scripting in depth in the Rive Masterclass. The free scripting mini-course is a good place to start.
