Animation That Delays the Content

The pattern and its cost

Sections start invisible and fade or slide in when scrolled to, which looks polished on a slow careful scroll.

Somebody scrolling fast, which is most people on a phone, outruns the triggers and sees blank space where content should be.

Somebody on a slow connection may see nothing at all, since the code deciding when to reveal has not loaded while the text has.

And somebody whose browser blocks or fails to run that code sees a page that is permanently empty.

Content should never depend on it

The principle that resolves almost every case.

The page should be complete and readable with no animation running at all.

Animation can then enhance what is already visible, which is a decoration rather than a dependency.

The failing version starts elements at zero opacity in the stylesheet and relies on code to turn them on.

The safe version starts them visible and animates them if the code runs, which produces the same effect for everybody who sees it and no empty page for anybody else.

That is a small change in how it is built and it removes the entire class of failure.

What it costs beyond that

• Load time, from the library used.
• Delay before content appears.
• Jerky scrolling on older phones.
• Battery, on continuous effects.
• Discomfort for people sensitive to motion.

The last is not a minor consideration. Large parallax movements and elements sliding across the screen cause genuine nausea and dizziness for some people, which is a physical response rather than a preference.

Respect the reduced motion setting

Since the operating systems already collect this preference and most sites ignore it.

Every current device has a setting where somebody can say they prefer reduced motion, and a browser makes that available to the site.

Honouring it is a few lines in the stylesheet that switch off or shorten the animations.

Somebody who has set that preference has usually done so because motion causes them a problem, so this is not a nicety.

Ask whoever built the site whether the preference is respected, since it is frequently not and is quick to add.

Test it by enabling the setting on your own device and reloading the site.

A worked example

A business had a site where every section faded in on scroll.

A customer reported that the pricing page was blank, which nobody could reproduce.

It turned out the page rendered fine on a fast connection and showed empty space on a slow one, because the reveal code had not loaded when the content did.

They changed the build so sections were visible by default and animated only if the code ran, and honoured the reduced motion preference at the same time.

The visual effect on a normal connection was unchanged.

The blank page reports stopped, and the pages also began appearing faster because less had to run before anything was visible.

Where animation genuinely helps

Since this is not an argument for a static site.

Feedback on interaction: a button changing when pressed, a field showing it has been accepted, a menu opening.

Showing a relationship: something expanding from where it was triggered so it is clear what it came from.

Indicating progress during a wait, which reassures somebody that a form is submitting rather than broken.

All of those tell the user something. Decorative reveals on scroll tell them nothing they did not already know.

The test is whether the movement conveys information or merely presents it.

Keep it short and small

Where you do use it.

Under about a third of a second for interface feedback, which is fast enough to feel immediate.

Small movements rather than large ones, since a subtle shift reads as polish and a large slide reads as an obstacle.

No infinite loops, which draw the eye permanently away from the content and are the most common complaint about motion.

And nothing that moves while somebody is reading, which is different from something moving in response to what they did.

Check it on an old phone

Because the experience differs enormously by device and the design was approved on a new one.

Animations that are smooth on current hardware become jerky on a phone three or four years old, which is a substantial share of visitors.

Jerky animation reads as a broken site rather than as a slow one, which is worse than no animation.

Test on the oldest phone anybody in the business has, scrolling quickly through a long page.

And test on a throttled connection, which most browsers can simulate, to see what happens when the code is late.

Ask what it is for

A question worth putting to whoever proposes it, kindly, since the answer is frequently revealing.

Animation is often added because a site felt static during review, which is a judgement made by people looking at it repeatedly rather than by somebody arriving once with a question.

A visitor who wants to know what you charge is not experiencing the page as static, they are reading it.

Where the honest answer is that it makes the site feel more considered, that is a legitimate aim and it should be weighed against a fifth of a second of delay rather than assumed free.

Where the answer is that competitors have it, that is not a reason on its own.

The counter-case

Motion done well is genuinely valuable.

Interface feedback makes a site feel responsive, and its absence makes even a fast site feel dead.

Subtle transitions also help people follow what changed on a page, which is a real usability benefit rather than decoration.

And for some businesses a distinctive treatment is part of the argument they are making.

Make the page complete without it, respect the reduced motion setting, keep movements small and short, and test on an old phone.

What to check

1. Load a page with the code blocked.
2. Confirm the content is still there.
3. Scroll fast and watch for blanks.
4. Enable reduced motion and reload.
5. Test on the oldest phone you have.
6. Remove anything that loops forever.
7. Keep feedback under a third of a second.

Step two is the whole principle, since a page whose content depends on animation running will eventually show somebody nothing at all.

The related loading problem is covered in the layout that jumps while loading.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.