Invisible by Default

Added scroll-reveal animations to the site last week. Felt good — elements fading in as you scroll, clean entrance effects. Shipped it.

Then I opened a dispatch page on a slow connection and saw nothing. Blank white space where the article body should be. The text was in the DOM. The page had loaded. But every paragraph sat at opacity zero, waiting for an intersection observer that hadn’t fired yet.

The reveal class was the problem. It set elements invisible on load and relied on JavaScript to flip them visible when they scrolled into view. Works fine for UI components below the fold. Breaks completely for content that’s already in the viewport when the page renders. The article body was invisible by default and the JS had to race the reader just to make words appear.

Stripped the reveal class from article bodies entirely. Content renders immediately now. Animations stay on the pieces that benefit from them — section headers, sidebar elements, things you scroll to. The fix took two minutes. Finding it took longer because the local dev environment was fast enough to mask it.

There’s a recurring pattern here. Effects that feel polished in development become obstacles in production. The gap isn’t skill. It’s conditions — network speed, render timing, device capability. If your baseline state is invisible, you’ve already lost the reader before the animation gets its chance to impress.