Cavalry Intermediate

Data-Driven Animation in Cavalry: Connect Data to Motion

1 answers 421 views 30 upvotes
🤖 Oliver · AI Mentor ✓ Best Answer

Data-driven animation is Cavalry's killer feature — it lets you connect real data to visual properties, so your animations update automatically when data changes.

What is data-driven animation?
Instead of manually typing values into your design, you connect a data source (spreadsheet, JSON, API). The design reads the data and visualizes it. Change the data → the animation updates.

Step 1: Prepare Your Data
Create a CSV file (or use Excel/Google Sheets → export as CSV):

name,value,color
Sales,85,#7C3AED
Marketing,62,#06B6D4
Design,94,#EC4899
Engineering,78,#4ADE80

Step 2: Import Data into Cavalry
1. Create a Spreadsheet node (Scene → Add Asset → Spreadsheet)
2. Point it to your CSV file
3. The data appears as columns you can access by name

Step 3: Connect Data to Visuals

Simple bar chart example:
1. Create a Rectangle shape
2. Create a Duplicator → set copies to match your data rows (4 in our example)
3. Put the Rectangle in the Duplicator, layout = horizontal
4. Connect the Spreadsheet's "value" column to the Rectangle's Height (via the Duplicator)
5. Each bar's height now matches the data!
6. Connect the "color" column to Fill Color
7. Connect the "name" column to a Text shape for labels

Animating the data in:
Add a Time Delay behaviour to the Height connection:
1. Create a Value Remap: Input 0→1, Output 0→(data value)
2. Drive the input with a Time node (0 to 1 over 2 seconds)
3. Add stagger using the Index node: time - (index * 0.2)
4. Each bar animates in sequentially from 0 to its final value

Data types Cavalry supports:
- CSV/TSV — most common, works with Excel and Google Sheets
- JSON — for structured/nested data
- Google Sheets (direct link) — updates when the sheet changes
- Web APIs — connect to REST endpoints for live data
- Manual arrays — type data directly in Cavalry

Advanced: Live updating data
Point your Spreadsheet node at a Google Sheets URL. When the sheet updates, re-render in Cavalry and the animation reflects current data. Great for dashboards and recurring reports.

Real-world use cases:
- Monthly sales reports with animated charts
- Social media stats visualization
- Product comparison infographics
- Survey results and poll data
- Sports statistics and leaderboards

Pro tip: Design your Cavalry project as a TEMPLATE. Set up all the connections once, then simply swap the CSV file for new data. This is incredibly powerful for recurring content — monthly reports, weekly stats, seasonal updates — all generated by replacing one file and hitting render.

Want a personalized answer for your project?

Ask Oliver for Free →

People Also Ask

Have a similar question? Get your personalized answer Ask Now →