This post purposefully ignores the reduced motion preference to give everyone the same truly terrible experience. I am sorry. Please use your browser’s reader mode.
Scroll fade is that oh so wonderful web design experience where elements fade in as they scroll into view. Often with a bit of transform on the Y-axis.
If you’re reading this via RSS you’ve been spared.
Done subtly and in moderation scroll fade can look fine†. Alas and to my dismay, subtlety is not a virtue of scroll fade proponents. Nor is timing. I’ve built too many websites that got almost to the finish line before I was hit with a generic scroll fade request. Fade what? Everything! Make everything fade into view! It’s too static, you know? Make it pop!
† nah it looks ghastly I’m just trying to be diplomatic.
Alt Pablo Escobar waiting; a three-panel scene featuring the character from the Netflix series Narcos. The meme expresses the sadness and boredom associated with anticipation - knowyourmeme.com
It’s usually an hitherto shadow stakeholder making the demand. The stakeholder to rule all stakeholders. No project is allowed to run perfectly smooth under their last minute gaze. Perhaps if I were to orchestrate a few minor slip-ups early in development, the web dev gods would go easy on me and forgo the final boss?
Good grief do I find generic scroll fade tacky! It’s annoying as f — both as a user and developer. I don’t want to talk about the JavaScript I’ve bodged to make it happen.
Rarely do I see scroll fade designed with any purpose or variety. 1s opacity transition with a 100px transform — actually, can you make it slower? It only ever looks remotely decent if the user scrolls down at a constant snail’s pace.
I try to dissuade the scroll fade. My protests are heard and ignored. It’s not an argument that can be won on subjectivity. The client pays to win on those terms.
... continue reading