Animation that doesn’t get in the way of buying

Animation on a website stirs up two opposite feelings in site owners. Some think a site without motion looks cheap and dated. Others have seen sites where everything slides, spins and appears in sequence while the visitor waits, and they want nothing of the kind.

Both are right. Animation isn’t good or bad in itself. The question is what job it does. If it helps people understand what’s happening, it’s useful. If it only takes up time, it gets in the way of buying, however good it looks.

Why motion is there at all

Animation in an interface has a few honest jobs:

• show that a tap or click worked;
• explain where an element came from and where it went;
• connect two states: a list and a card, a floor and an apartment;
• draw attention to what matters;
• make waiting easier while something loads.

Take an apartment finder. The visitor clicks a floor, the plan smoothly zooms in, the selected apartment lights up, and a card opens beside it. Here the motion explains the relationship: here’s the floor, here’s the apartment on it, here are its details. Without animation the screen would simply switch, and the person would have to figure out all over again where they are.

Same with an inquiry form: after submitting, the button doesn’t just vanish, it turns into a confirmation. People see that their action led to a result, and they don’t click a second time.

Where animation starts to get in the way

Problems start when motion is added for the sake of impressing. Typical cases:

• text fades in on scroll with a delay, and you have to wait for it;
• the site opens with a splash screen that lasts several seconds;
• sections slide in one by one even though the visitor has already scrolled past;
• the inquiry button pulses and distracts from reading;
• the cursor is replaced with a custom one that lags behind your hand.

Each of these is tolerable on its own. Together they turn the site into a presentation you can’t skip through. And an apartment buyer often comes back to the site many times: to compare prices, to show a floor plan to family, to find the sales office phone number. An effect that impressed on the first visit is annoying by the fifth.

Speed and duration

Most interface motion should be short, a fraction of a second. Pressing a button, opening a menu, switching a tab should feel instant, just smooth. Long, expressive animation belongs where people aren’t in a hurry: for example, the opening screen of a residential development site while they take in the look of the project.

The second rule: animation must never block an action. If the menu is still opening and the visitor has already tapped an item, the navigation should happen immediately. If a section is still sliding in, its text should already be readable and its buttons clickable.

Third, motion should be consistent. If apartment cards rise from below in one section and slide in from the side in another, if some buttons respond softly and others abruptly, the site feels stitched together from different pieces. A few simple motion rules for the whole site beat a separate effect on every screen. It also makes maintenance easier: a new section looks like it belongs from day one.

Phones, and people who find motion unpleasant

What runs smoothly on a designer’s computer can stutter on an inexpensive phone. Choppy animation is worse than none at all: the site looks broken. So motion has to be tested on real devices and simplified where they don’t have the power.

On top of that, some people get dizzy from a lot of motion on screen. Phones and computers have a “reduce motion” setting, and a good site respects it: instead of fly-ins and parallax, it uses a calm fade or simply shows the content right away.

How to check your own site

A simple test: go through the main scenario the way a buyer in a hurry would. Open the site on a phone, scroll quickly to the floor plans, pick an apartment, send an inquiry. Count how many times you had to wait for something.

The second test: turn off all the animation, in your head or on a test version, and see whether the site got worse. If nothing was lost, the motion was decoration. If it’s suddenly unclear where things come from, the animation was doing real work.

Good animation only gets noticed when it’s taken away: suddenly nobody can tell what just happened.

If the motion on your site feels excessive, or the interface feels flat and lifeless, we can go through the key scenarios together and decide where animation helps and where it’s better removed.