Motion Element
Before and After Comparison Bar Animation
Two to four horizontal pill bars race to their values with the figures counting up on the right. The largest takes the accent.
Create in your browser. Start for free.
What Is the Comparison Bars?
The comparison bar animation puts two to four things side by side and lets the gap between them make the argument. Each row is a label, a rounded horizontal bar and a value on the right; the bars fill to their share of the largest value and the figures count up as they fill. The longest row takes the accent colour automatically, so the winner is obvious before anyone reads a number. It is the natural shape for before and after results, this plan versus that plan, last year against this year, or two products against each other. Because the rows are horizontal, long labels fit, which a vertical bar chart cannot offer at phone width.
How It Works
Rows settle in from the top with a short stagger. Each bar's width is animated from zero to its proportion of the maximum on an ease-out curve, with an eased horizontal gradient so the fill has depth without banding. The value beside each row is interpolated over the same window as its bar and lands exactly on the number you entered. Which row is the leader is computed from the values, so changing a number can move the accent to a different row without any extra setting.
Best For
- -Before and after results of a change
- -Plan A versus plan B pricing or output
- -This year against last year
- -Two or three products head to head
- -Any comparison where the gap is the point
Best Platforms for Comparison Bars
TikTok
Versus content is one of TikTok's oldest formats. Racing bars settle the argument on screen in two seconds and give the comment section a number to argue with.
Instagram Reels
Before and after posts on Reels usually rely on two photos. Adding the bars underneath quantifies the change, and the accent on the winning row reads even when the sound is off.
Before and after: setting up the two rows so the change reads instantly
For a before and after, enter the before row first and the after row second, so the eye travels down into the improvement. Use the same unit for both, and put the unit in the suffix field rather than the label, so 4.2k and 11.6k line up cleanly. If the after value is smaller and that is the good news, for example a lower cost or a faster load time, the accent still goes to the larger bar, so consider rephrasing the metric so bigger is better, such as savings instead of cost, or use the prefix and suffix to make the direction explicit. For three or four rows, order them so the story is one of ranking, and let the automatic accent mark the leader; if the leader is not the row you are talking about, the tooltip on the animated bar chart may fit better.
Why horizontal bars beat a table for a comparison video
A table with two columns is the honest way to compare numbers, but it does not move and it does not tell the viewer which cell to read first. Horizontal bars encode the same figures as lengths, and length is the one visual property people compare accurately at a glance. Adding motion to the fill turns the comparison into a race, which is a narrative: the viewer watches one bar pull ahead and knows the outcome before the count-up finishes. Keeping the rows to four at most preserves that clarity. The card is white with one accent, so it can sit over product footage, a screen recording or a plain colour without competing with it, and the labels stay readable at the width of a phone in a vertical frame.
Can I choose which row gets the accent colour?
The accent goes to the row with the largest value so that the leader is always highlighted consistently. To spotlight a different row, reorder or rephrase the metric so that row is the largest, or use the animated bar chart, where the highlighted bar is a manual choice.
What is the maximum number of rows in the comparison card?
Four. Beyond that the bars become thin and the labels crowd at phone width. If you need to compare more items, the stat grid shows up to eight figures as tiles without bars, or you can split the comparison across two cards.
Can the values be percentages or currency?
Yes. The prefix and suffix fields apply to every row, so a currency symbol, a percent sign or a unit such as ms or kg renders beside each figure. The bars scale from the raw numbers regardless of the unit shown.
Do the bars have to start at zero?
Yes, every bar fills from zero to its share of the largest value, which is what makes the lengths honest. There is no truncated axis, so a small difference looks small; if you want to exaggerate it, show the percentage change as a separate number counter.
Your next video starts here
Create a Free Comparison Bars Motion Element
Beautiful captions. Your words, your style.
Keep exploring