A website that moves without getting heavy

Almost every recent website fades its blocks in as you scroll down the page. The effect is discreet, it gives the visitor the feeling of a reading that moves forward, and it is mostly noticed when it is missing. What is noticed less is what it costs, and that cost varies enormously depending on how it is done.

The price of a fade

For fifteen years, getting this effect meant adding an extra tool to the site, picked from a catalogue, to be installed, updated and watched. A tool of several dozen kilobytes, heavier than the text of the page, for a fade. The visitor downloads it on every first visit, sometimes on a phone at the edge of coverage. The client pays for it twice: at installation, then at every update, for as long as the tool exists.

That tool has another weakness, less visible. If it breaks, or if the people who wrote it stop maintaining it, the page can stay blank. The text is there, but it waits for a signal that never comes. We have seen small business sites stay empty for that reason alone, with nobody in the company understanding why.

What browsers now do on their own

Recent browsers have learned to do this fade without outside help. It is enough to declare, in the page’s styling, that a given block appears as it enters the window. Nothing to install, nothing extra to load, nothing to watch. The effect is also smoother, because the browser handles it itself without making the rest of the page wait.

Not everyone has the latest browser, and that is where the way it is done matters. Our rule fits in one sentence: the page without the movement must be a finished page. A visitor whose browser cannot do the effect simply sees the text in its place, at once, and loses nothing. Writing the opposite, hiding the text at the start so it can appear later, is a bet that the effect will work for everyone. Those for whom it does not work are left facing a blank page, and they do not come back.

The second safeguard concerns people who are sensitive to motion. A fade that fires on every scroll can cause nausea in those who cope badly with moving screens. Devices offer a setting to ask for less motion, and respecting it costs almost nothing. On this site, as soon as that setting is on, everything stops and the page appears as it will be read. This is not politeness: it is an accessibility criterion.

A beginner’s mistake, made here

When we rebuilt this site with this method, we made a mistake that we describe because it is instructive. An illustration at the very top of the page, already visible on opening, stayed frozen half-drawn, however the page was scrolled.

The explanation is simple once found. An effect tied to scrolling is set by the element’s position in the window. The illustration was already halfway up at load, so the effect left it halfway through. It was not a fault: the site was doing exactly what we had asked. The rule that came out of it is to tie to scrolling only what is genuinely further down the page. What is visible from the start is animated with a duration and a delay, as it always was.

What it changes for a client

We replaced an appear-on-scroll tool with a few lines of styling, barely eight hundred characters. This site now loads no program at all for its effects, and it moves more than before.

For a client this comes down to three concrete advantages. The site is faster, which shows in the tools Google makes available. It costs less to maintain, since there is no extra tool to grow old. And it stays readable in every case, including when the visitor’s browser is old or their settings ask for calm.

The same concern for restraint governs moving between two pages and how headlines break.

This is the kind of progress we look for: not the kind that lets you do one more thing, but the kind that lets you remove one. The result can be seen live: the visual worlds on the style page all use this method, and the pricing page says what a site designed this way costs.