Motion graphics on a small-business site: when it earns its keep

I’ve written before that a small-business website should be boring and fast. I still think so. And yet our own home page has a WebGL water droplet running in the hero. Both things are true, and the reason is a set of rules the animation has to follow to earn its spot.

Rule 1: the content never waits for the motion

The first thing on screen is the headline and a still image. The animation code isn’t even downloaded yet.

On our site the droplet engine is around 50 KB of WebGL code. It lives in its own bundle, it’s only fetched on a page that actually has the droplet, and it starts after the page has loaded and the browser is idle. So it never competes with the fonts, the main text, or the scripts that make the page work. If it fails to load, you still see the still image and the page is fine.

That order is the whole game. Most heavy animations I see on small-business sites do the reverse: a big script loads first, the content waits, and the visitor on a phone in a parking lot hits back before anything appears.

Rule 2: stop when nobody is looking

An animation that loops forever keeps the device drawing frames for as long as the page is open, even when it’s scrolled out of view or the tab is in the background. That’s battery and heat for nothing.

Every looping animation on our site is marked to pause when it leaves the viewport or the tab is hidden, using the browser’s IntersectionObserver and visibility events. Scroll back, it picks up where it left off. That one change matters more than any fine tuning of the animation itself.

Rule 3: reduced motion means reduced motion

Some people get dizzy, nauseous or distracted from motion on screen, and they turn on a reduced motion setting on their device. Websites can read that preference through the prefers-reduced-motion media query (MDN).

The W3C’s guidance on this, WCAG 2.3.3 Animation from Interactions, says motion triggered by interaction should be able to be turned off unless it’s essential (W3C). It’s a AAA criterion, so it’s above the AA level most sites aim for, BUT honoring it costs almost nothing, so I do it everywhere.

When the preference is on, our looping animations stay paused. The site still looks finished, because the still state was designed first, not as an afterthought.

Rule 4: the motion has to say something

This is the hardest one to follow, because it’s a judgment call. Motion that earns its place usually does one of these:

• Confirms an action. A button that responds when tapped tells you the tap registered.
• Shows a relationship. A card that expands into its detail page tells you where you came from.
• Gives the brand one memorable moment. One, not twelve.

Motion that doesn’t earn its place: text that slides in on every scroll, intro screens, parallax that fights the scroll wheel, and anything that hides the phone number until it’s done animating.

Rule 5: test on a mid-range phone

My laptop will run anything. A three year old phone on cellular is a different story, and that’s who a lot of local customers are. I check animation-heavy pages on a real mid-range phone and with the browser’s CPU slowdown turned on. If scrolling stutters or taps feel slow, the motion gets cut back before launch, not after.

What it costs

For a typical small-business site, small interaction details and a page transition add very little to a build. A custom WebGL or illustrated hero is real design and engineering time, and it’s worth it only when the brand benefits from being remembered: a studio, a product, a hospitality business. For a plumber, I’d spend that budget on photos of real jobs instead.

If you’re curious how the transitions themselves are built without a heavy library, I go through it in Scroll-driven animation and view transitions without a library.

If you’d like to talk about where motion would help your site (or where it’s hurting it), let me know. Thanks!