Skip to main content

Learn/Animations

Where Motion Is Cheap: The Animation Families That Barely Cost Anything

Seven of our nine animation families measured under a tenth of the main thread. Where you can add motion freely, and where to spend the one expensive effect.

Daniel, founder of BricksfusionBy DanielAugust 10, 20266 min read
Tested on 96 Bricksfusion effects measured in headless Chromium, twice each, August 2026

The short answer

Most animation is nearly free. When we measured our own 96 effects, 7 of the 9 families measured 6% of the main thread or less, covering 47 of the 82 effects that animate on their own. The expensive group is small and specific: Advanced Effects and Core Background. Spend your budget there once, and take the rest of your motion from the cheap families without worrying about it.

The usual advice about animation and speed is a warning: use less of it. That advice is aimed at the wrong thing. It treats a hover state and a full-screen drawn scene as the same purchase, when the measurement says the gap between them is about 80 to one.

The more useful version is a map. Here is where motion is cheap, based on measuring every effect in our own library in a real browser on 10 August 2026.

Which families are actually cheap?

Sorted by what they measured, cheapest first:

  • Transition Pages: 0.7% median across 4 effects
  • Interaction: 0.9% median across 6 effects
  • Menu Animations: 1.9% median across 3 effects
  • Showcase: 2.2% median across 11 effects
  • Animated Text: 2.4% median across 4 effects
  • Buttons: 3.5% median across 3 effects
  • Visual Effects: 6% median across 16 effects

For comparison, the two families in the expensive group measured 127.3% and 100.8%. The gap is not a gradient. Everything in the list above is close enough to free that the difference between them is noise on any real device, and the expensive group is in a different business entirely.

Good to know

These are medians from a comparison run, not a promise about your visitor's phone. The point is the distance between the groups, which is large enough to survive any reasonable difference in hardware. How the measurement worked, and what it says about predicting cost, is in what makes an animation expensive.

Why are these so much cheaper?

Every family in the cheap list shares one of two properties, and some share both.

They move a few things instead of every pixel. A card lifting on hover, a menu sliding open, a heading revealing itself. The browser is moving a small number of elements that already exist, which is the operation it is best at.

They finish. A page transition runs during navigation and stops. A reveal plays once as the section arrives and never runs again. Compare that with a background, which starts when the page loads and is still working while your visitor reads your pricing and taps your button.

Continuous plus full screen is the expensive combination. Miss either half of it and the cost collapses.

The effects that cost nothing until someone uses them

The measurement turned up a group we had not thought to separate before. 12 effects registered no activity at all while the page sat there untouched, because they are waiting for something: a hover, a click, a cursor moving nearby, a section scrolling into view.

This is the cheapest motion a page can carry, and it is also usually the most useful, because motion that responds to a visitor is doing a job rather than decorating. An interface that answers when you touch it feels considered. A background that moves whether or not anyone is watching only feels expensive.

How much motion can one page carry?

More than most people assume, if it comes from the right places. A realistic page can have a reveal on each section as it scrolls, feedback on every button, a menu that animates open, hover states on a grid of cards, and a transition between pages, and still spend less than a single continuously drawn background would cost.

The budget that works in practice is simple. Take everything you want from the cheap families without counting. Then allow yourself one effect from the expensive group, on the page and in the section where it earns the attention. Our guide to animated backgrounds covers how to choose that one, since backgrounds are where the expensive budget usually goes.

What that leaves you with is a site that feels animated everywhere and only pays in one place.

When is a heavy effect worth it?

When it is the reason someone remembers the page. A hero on a landing page, a single showcase section, the top of a portfolio. Those are real cases and a heavy effect is the right tool for them.

It stops being worth it when it sits behind content people need to read and act on, when there is a second one further down the page, or when it is there because it was in the library rather than because the page needed it. Weight tells you where an effect belongs, not whether you are allowed to use it. Our guide to animations and site speed covers what happens to your scores when that judgment goes wrong.

Bottom line

Animation is not expensive. One specific kind of animation is expensive, and it happens to be the kind that photographs well. 47 of the 82 effects that run on their own live in families measuring 6% or less, and a further 12 cost nothing at all until a visitor interacts with them. Build the page out of those, keep one heavy effect for the moment that deserves it, and you will not have to choose between a site that moves and a site that is fast.

FAQ

Questions about this topic

Can a page have lots of animation without getting slow?

Yes, as long as the motion comes from the cheap families. Hover states, button feedback, menu motion, page transitions and things that reveal on scroll cost a fraction of what a continuously drawn background costs. A page can carry a dozen of those comfortably. It is one full-screen drawn scene that changes the arithmetic, not the number of animated elements.

Which animations are the cheapest of all?

The ones that do nothing until the visitor does something. In Bricksfusion's measurement of its own library, a group of effects registered no activity at all while the page sat untouched, because they only run in response to a hover, a click or a scroll. Motion that waits costs nothing while it waits, which makes it the safest place to spend your animation budget.

Are page transitions expensive?

They were the cheapest family in our measurement. A transition runs briefly during navigation and then stops, so it never competes with the content a visitor is reading. That is the opposite of a background, which starts when the page loads and keeps working until the visitor leaves.

How do I know which family an effect belongs to?

Ask what it redraws and for how long. If it draws a whole area continuously, it is in the expensive group whatever it is called. If it moves a handful of elements, or moves them once in response to something, it is in the cheap group. Libraries that sort their effects into families and publish a weight for each make this a lookup instead of a guess.

Where Motion Is Cheap: The Animation Families That Barely Cost Anything | Bricksfusion