Can I use my own numbers?

Yes, values, labels and units are editable lists, and the layout adapts to how many you enter.

Is the chart accurate?

Bars and lines are drawn from your values directly, so relative heights and slopes are true to the data.

Animated charts: data that explains itself in seconds

Updated September 18, 20263 min read

How do you make an animated chart for a video?

Enter your values and labels into a chart preset, set the colors, and choose how fast the bars grow or the line draws. Export MP4 for a slide or transparent WebM to place the chart over a presenter, with no spreadsheet or plugin involved.

A chart in a video has one job: make the shape of the data obvious before the narration explains it. These presets grow bars, sweep pies, draw lines and step through processes with your own numbers.

Five animated infographics presets to start from

Hover any card to play it. Opening one loads it in the editor with every control unlocked.

Bar Chart Grow
3s
Columns rise one by one with live counting values and the top performer highlighted. Type your own data.
Pie Chart Sweep
3s
A donut chart sweeps around slice by slice while the legend fills in with computed percentages.
Line Chart Draw
3s
A trend line draws across a subtle grid, points pop along the way and a soft gradient fills underneath.
Progress Steps
3s
A roadmap track fills from step to step, ticking each milestone with a check as it passes.
Comparison Bars
3s
Horizontal bars race to their values side by side, making rankings and comparisons instantly clear.

All animated infographics

How to make one in the browser

01Open a animated infographics presetBrowse the Animated Infographics category and open the preset closest to what you need. It loads in the editor with every control unlocked.
02Make it yoursRewrite the text, set your brand colors and font, adjust easing and duration, and switch the aspect ratio for the platform you are posting to.
03Export the clipChoose MP4 for a normal track or transparent WebM for an overlay, pick a resolution up to 8K, and the file renders on your own machine.

Which format should you export?

Use MP4 when the clip sits on its own track or fills the frame. Use transparent WebM whenever it has to float over your own footage: the alpha channel is real, so no keying or blend mode is needed.

Format: MP4 H.264 · WebM VP9
Alpha: Transparent WebM
Resolution: 720p to 8K
Aspect: 16:9 · 9:16 · 1:1 · 4:5
License: Commercial use included

Three tips that make it look intentional

Four to six values is the ceiling for video; beyond that, split the chart.
Label the axis in the animation, not in a caption people cannot read on a phone.
Hold the completed chart for a beat before cutting away.

Frequently asked

Can I use my own numbers?: Yes, values, labels and units are editable lists, and the layout adapts to how many you enter.
Is the chart accurate?: Bars and lines are drawn from your values directly, so relative heights and slopes are true to the data.

Loading Animations
Loading animations: spinners and progress that feel fast
A good loader starts instantly, loops seamlessly and suggests progress rather than time. Keep the motion under one and a half seconds per cycle, use a single accent color, and export a transparent WebM so it can sit over any app screen or video.
Read the guide
UI Animations
UI animations: product demos without a screen recording
Use a UI preset: a button press, a toggle, a cursor click, a card flip or a toast. Type your own labels, set your product colors, and export transparent WebM. The interaction reads clearly even when the real app is still in design.
Read the guide
Animated Frames
Animated frames: borders that focus the shot
Use a frame when you need to separate inserted content from the main shot: a photo, a quote, a webcam, a product. Corner brackets and chasing borders draw the eye to a region, and a transparent export lets the footage stay visible inside.
Read the guide