Website animation that does not slow your site down
By Core Concepts · · Design
Animation has a bad reputation with people who care about speed, and it is mostly deserved. Plenty of sites are slow because of it. But motion and performance are not opposites. The slow sites are making a few specific mistakes, and they are avoidable.
Why animated sites end up slow
- Video used as animation. A background video can weigh more than the rest of the page combined.
- Animating the wrong properties. Changing width, height or position forces the browser to recalculate the layout on every frame.
- Too many libraries. One for sliders, one for scroll effects, one for counters, each with its own weight.
- Everything running at once, including the effects that are off screen.
Animate what the browser finds cheap
Browsers can move, scale, rotate and fade an element very efficiently. In code terms, that means animating transform and opacity. Almost every effect you have admired on a well-made site is some combination of those two.
When an effect needs something else, such as a line drawing itself, do it in SVG or on a canvas, where the cost stays contained.
Draw it in code instead of loading it
A chart that is drawn by a few lines of code weighs almost nothing and stays sharp at any size. The same chart as a video or a large image has to be downloaded first. In our Numa template every visual is generated in code, so there are no photographs or videos to load.
Only run what is visible
A canvas animation at the bottom of the page should not be running while the visitor is still reading the top. Pause effects when they leave the screen and start them when they arrive. This one habit keeps long, rich pages smooth on ordinary laptops and phones.
Respect reduced motion
Some people get dizzy or distracted by movement, and their device has a setting that says so. A site should honour it: no pinned scroll sequences, no parallax, final states shown immediately. This is an accessibility requirement, not a nicety, and all our templates do it.
Keep an eye on the numbers Google uses
Google measures real visits with three Core Web Vitals:
- Largest Contentful Paint (how fast the main content appears): good is 2.5 seconds or less.
- Interaction to Next Paint (how quickly the page responds): good is 200 milliseconds or less.
- Cumulative Layout Shift (how much things jump around): good is 0.1 or less.
Motion affects all three. Do not hide the main headline behind a long intro, do not block clicks while something plays, and reserve space for images so nothing jumps.
A simple rule
Motion should explain something: where you are, what changed, what to look at next. If removing an animation would lose nothing, remove it. What is left tends to be both faster and better.
You can judge how this feels in practice by scrolling any of our live demos.