Scroll Fading Content Is a Bad Idea for Your Website

Several months ago, I began drafting a post highlighting some of my least favorite/most hated web design gimmicks, patterns, and techniques. For various reasons, that post never materialized. Thus, I’m glad to see David Bushell tackle one of the items on my list in his “Death to Scroll Fade!” post, which asks web designers to stop using a particularly annoying gimmick.

Even if you didn’t know what to call it, you’ve probably encountered “scroll fade” before. You arrive on a webpage that looks surprisingly blank, but as you start scrolling, text, images, and other content fade into view, slide in from the sides, or otherwise appear out of the blue.

To be fair, tasteful uses of “scroll fade” do exist — see Terry Godier’s thoughtful exploration of RSS reader interfaces or Apple’s page for the iPhone 17 Pro — but they’re the exceptions that prove Bushell’s rule. Put simply, “scroll fade” rarely improves a webpage. More often than not, it feels like it was just tacked on in a last-ditch effort to make the webpage feel cooler and more dynamic. Indeed, even those websites that do “scroll fade” well could probably remove it without harming or negatively affecting their users’ experience in the slightest.

So why is “scroll fade” such a bad idea? At its core, “scroll fade” degrades the user experience by requiring users to adjust their behavior to make it more acceptable for the webpage’s function, and often without any indication or instruction. For example, if the user scrolls too fast for the page, then they could be stuck with a blank screen as they wait for the content to “catch up” to their position — assuming it catches up in the first place. (This is very easy to do on Bushell’s example, in fact.)

At the same time, “scroll fade” increases cognitive load on users, forcing them to pay extra attention to how the webpage’s content behaves instead of the actual content itself. Back in 2023, Sara Paul wrote an in-depth article on “scroll fade” that lists possible reasons for its use (e.g., guiding users, optimizing data loading) while also highlighting potential issues. One such issue relates to the “illusion of completeness” (i.e., a user thinks they’re seeing everything on the webpage even though more content actually exists).

She writes: “When information below the fold slowly faded in on a page that already seemed complete, many study participants assumed there was nothing else to be found on the page.” More:

Multiple participants experienced this issue on the Crypto.com page, because the information at the bottom of the page faded in only after the user scrolled far down below the fold. Eventually, because our study participants did spend some time exploring the site, they did discover the information that was faded in, but it’s safe to assume that, in real life, most users would not discover it on their own.

When users discover that they must make an additional effort to verify that they’re seeing everything a webpage has to offer, they experience increased frustration and cognitive load. That, or they’ll just stop looking altogether and leave the page, thereby missing out on something potentially important simply because it took too long to fade in to be noticed.

“Scroll fade” may also be harmful from a business perspective. Some evidence suggests that “scroll fade” content has a negative impact on SEO because search engines devalue content that’s initially hidden. Hence, if you’re applying “scroll fade” to your webpage’s most important and vital content, content that won’t become visible unless a user scrolls far enough down the page, you might just be shooting yourself in the foot, SEO-wise.

Finally, while “scroll fade” can be annoying for users, it presents actual challenges for disabled users, and in particular, users with vestibular disorders (i.e., motion sensitivity). For these users, animations — like content fading in and out — can cause dizziness, nausea, and other discomfort.

Ideally, their needs would be accommodated by placing scroll fading and other animations behind the prefers-reduced-motion media query, since the last thing a developer should want is their website making someone feel physically ill. There’s nothing that forces web developers to do that, though, and unfortunately, accessibility is often a pretty low priority when developing a website, especially when that time can be spent making it look “slick,” “flashy,” and “cutting edge.”

I get it, you want your webpages to look cool and feel engaging for users. But there are ways of accomplishing that without resorting to gimmicky animations that annoy and frustrate users, harm your site’s SEO performance, and cause disabled users discomfort. I would even go so far as to say if the only reason someone will find your webpage engaging is because its text fades in and out, then maybe your webpage doesn’t need to exist in the first place.