Why Is One Animation Free and Another One Heavy? We Measured 96

Everyone selling animations tells you theirs are optimized. Almost nobody publishes a number. That is understandable, because measuring your own library is a good way to find out something you would rather not know, but it leaves buyers choosing between adjectives.

So we measured ours. This article is what the measurement said about a question that matters before you pick anything: why is one animation effectively free and another one capable of making a fast page feel slow?

How did we measure this?

Every effect in the library was loaded on its own into a real browser, left to settle, and then watched for two seconds while the browser reported how much time it spent working. Each one was measured twice, once normally and once with the browser asking for reduced motion. The run covered 96 effects on 10 August 2026.

Three honest caveats, because a number without them is decoration. This ran on a server rather than on a phone, so effects that lean on graphics hardware look worse there than they would on a real machine with a real graphics chip. The figures are calibrated against each other, not against your visitor. And 2 effects had to be left out because they stream a sample video from elsewhere that the test machine could not reach.

What survives those caveats is the comparison, which is the part you need anyway. Nobody chooses an effect by its absolute millisecond count. They choose between two effects.

Does a longer settings list mean a heavier animation?

This is the assumption we expected to confirm and did not. Across the measured effects, the relationship between the number of settings an effect exposes and what it costs to run came out at 0.31 on a scale where 1 would mean settings tell you everything and 0 would mean they tell you nothing. That is closer to nothing than to something.

The clearest illustration is a pair from opposite ends of our own library. Custom Cursor carries 14 settings and measured 3.7%. Cells carries 4 and measured 103.5%, which is to say it kept the thread busy for essentially the whole measurement. The effect with far more configuration costs a fraction of the plainer one.

It makes sense once stated: settings are things you can change before the page loads. They are not work the browser does while someone is reading. An effect can offer twenty ways to tune a motion that is cheap to draw, or four ways to tune one that is not.

Does the file size tell you what it costs?

Better than the settings do, and still not reliably. The same comparison for transfer size came out at 0.54, which is a real relationship but not one to bet a page on.

The reason is that they are two separate bills. File size is what your visitor waits for once, at the start. Running cost is what the device pays continuously afterwards. Some of the most expensive effects we measured are a few kilobytes of instructions that then draw a full screen sixty times a second, which is a small download and a large appetite. Others download more and then sit almost still.

If you only ever check one of the two, check the running cost, because the download happens once and the drawing happens for as long as somebody stays.

So what does predict the cost?

What the effect draws, and over how much of the screen. Grouped by family, our library splits into two populations with almost nothing in between. Advanced Effects and Core Background sit at 127.3% and 100.8%. The other 7 families all measured 6% or less.

There is no gentle slope between those two groups, and that is the single most useful thing in the whole measurement. The family you pick decides your cost before you have chosen an individual effect or touched a single setting. Which families are the cheap ones, and how much motion you can get out of them, is the subject of where motion is cheap.

The pattern behind it is consistent. The expensive families draw a whole scene continuously across the whole area. The cheap ones move a small number of things, or move them once and stop. Our guide to animated backgrounds goes deeper into the family that causes the most trouble, and whether animations slow down your site covers what that does to your speed scores.

Are a vendor's own weight labels worth anything?

Only if the vendor can show you the measurement behind them, which is the reason we ran this at all. Ours are three words on every effect page saying whether it is light, moderate or heavy.

Against the measurement, the light group came in at a median of 1.3% and the heavy group at 103.4%, with no effect sitting on the wrong shelf. A gap of about 80 to one between the two ends is wide enough that the label is doing real work for a buyer.

The wider point is not that our labels passed. It is that a label you cannot check is a marketing adjective. If a library publishes weights, you can plan a page around them. If it does not, the absence is the answer to how carefully it was measured.

What this changes when you pick an effect

Four things follow directly from the numbers above.

• Choose the family before the effect. It decides more than any other choice you make afterwards.
• Stop reading the settings list as a warning sign. A long list of controls is a sign of a flexible effect, not a demanding one.
• Budget the expensive families like a hero image. One per page, where it earns the attention, and static elsewhere.
• Test on a mid-range phone. Every measurement in this article is a comparison; your visitor's device is the only absolute that matters.

Bottom line

An animation is expensive when it redraws a lot of screen a lot of the time. It is cheap when it moves a few things, or moves them once. The proxies people reach for instead, the length of the settings list and the size of the file, are weak and moderate predictors respectively, which is why libraries that publish a measured weight are easier to build with than libraries that publish adjectives. Pick the family first, spend your expensive effect where it counts, and check the result on the cheapest phone you own.