Scroll reveals that never hide what you came for

Content that rises into place as you scroll can make a page feel alive. Done carelessly, it makes a page slower to read and, in the worst case, leaves parts of it invisible. We rebuilt ours this week and want to write down what we learned.

Never delay the first screen

The first screen is what every visitor sees and what speed tools measure. If it waits for a script to reveal it, the largest element appears late and the page feels slow. So our script only touches elements that start below the fold. Everything you see on arrival is already there in the HTML, painted at once.

The same rule protects people without JavaScript. The hidden starting state only applies when a script has marked the page as ready for it. Without the script, nothing is hidden in the first place.

The bug: headings that never came back

Our first version hid each heading behind a clip, a mask that covered the text from the bottom, and waited for the heading to scroll into view before opening the mask.

Most of the page worked. The headings did not. When we scrolled through every page in a test browser and counted elements that were still waiting, the headings were stuck on every page.

The cause: a fully closed clip leaves nothing visible to observe. The browser reported the heading as never on screen, because in a real sense it was not. The reveal waited for a moment that could not arrive.

We now move headings with a small slide and a fade instead of a closed clip. A clip is still used for images, but it never closes completely, so there is always something on screen to observe.

The test that caught it

The test scrolls each page from top to bottom in steps, at phone and desktop sizes, then counts two things: elements still waiting to be revealed, and any text or image sitting at zero opacity. Both numbers must be zero on every page. A visual check would have missed it on a fast laptop, because a person rarely scrolls slowly enough to notice what is missing.

What we keep

• Reveal only below the fold.
• Never fully hide anything that has to be observed to come back.
• With reduced motion on, show the finished page and skip the motion entirely.
• Test the hidden state on purpose, with a script that scrolls like a patient reader.