Sticky 'headers' that disappear when you scroll down, and appear when you scroll up. I hate them so much. It hurts my brain to see the stupid thing appear and disappear constantly if I scroll around a page.
The worst part is you can't even zap them out of the way with something like uBlock, because then there's no header even when you're at the top of the page. >:(
EDIT: Whoops, flipped the directions. Complaint still stands though.
There is a special circle in hell where designers of such sites have to actually use the sites they design.
and with the website doing the same thing, it's a mess.
It is the first thing I suggest to anyone when I see someone didn't implement it.
I've never heard a complaint about it until now.
I don't know what portion of users we are though, I'm glad to see I'm not the only one!
The user discovery happens because the act he performs provides the exact intent you need to give him the shortcut.
Also for clarity this is only relevant for content based sites and not apps. It is vanishingly rare for users to scroll up when reading content unless they want to reach the top
This assumption is the problem. No, it is not rare for users to scroll up while reading. People are not perfect machines that read everything in one pass and understand it fully.
They may go back to re-read, or look at an earlier image or figure in the text, or otherwise. Sometimes people zone out for a minute and find they 'read' with their eyes but didn't actually take in the content. That requires going back.
For me, scrolling up to re-read is a basic use case of a web page. If it can't do that properly, it has failed.
If the header only appears after scrolling up for a bit then it’s not so bad, but most implementations show the header after scrolling 1px up. That’s infuriating.
There is no context which makes it OK.
Stop making things "intuitive" and expose explicit options to users.
"Reader Mode" shouldn't even be a special mode. It should just be the default browsing experience, and users who want all this styling crap should have to enable "Clown Mode" or something.
-_-
"Why can't we have a functional version of the site for the blind, and the normal one for everyone else?"
'We have that! It's called HTML!"
Edit: Earlier version of this point: https://news.ycombinator.com/item?id=20224961
Bwahahaha, +1! This reminds me of calling Windows XP's default motif "Fisher-Price" mode. Which, sadly, looks professional and efficient compared to Windows (and, increasingly, the Mac) today.
When scrolling/reading a web page, it literally changes that section of the text so that it fades to gray.
So, "everything scroll fades".
I couldn't find a way to turn it off. Quite irritating, IMHO.
EDITED TO ADD ELABORATION: The issue with iOS "scroll fade" text color in Safari near the top notch is that this makes that top-edge-text "dynamic" (changing) and thus "draws attention" to it visually, thus competing for eyeball attention when I am probably actually reading somewhere further down on the page. Also, I would still like to be able to glance up to the topmost visible text if wanted, without having to adjust to its different and less visible colors. Apple designers should know all this. Further, I'd say the page text color should probably by default respect what the web page designer configured it as, and not have the OS change that text color (unless the user gets fancy and requests an override with dark mode or whatever settings).
This article's critique seems valid, too (more generically about "scroll fade" in interfaces, e.g. web pages, which seems to mostly be about items appearing gradually via motion). Personally, I see less of that these days, compared to making every page in an OS fade out where unnecessary.
My "edge to edge screen" iPhone now resembles the last generation of iPhones with home button from 2017.
It also supports firefox and chrome extensions, so you can use things like UBlock Origin and Privacy Badger.
How about they give us back small iPhones with 4" screens then and whoever wants the fade can imagine it outside the physical phone?
The goldfish animation along the bottom is epic and i will have to mine that bit for reuse somewhere :).
I could be wrong, but my simple guess is that it's become widespread in LLM-generated websites partly because of Anthropic's own style guides getting adopted through Claude-bundled skills and such.
“Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.”
I assume the study results would be the same if they were repeated using fade scrolls.
15 years ago it did look very polished, boutique, professional. Now that it's a module everyone can do, everyone literally does it for every module.
Also there's tailwind that likely has a module for all the modules in webflow.
Because it is.
For sites with dynamic content (social media, news, etc.), it doesn't happen.
But commercial sites trying to convince you to use their product, they're incredibly common. It's not always a fade in exactly like this site does it. Sometimes it's content sliding in from the side.
It's incredibly pervasive on SaaS marketing pages.
That would explain my ignorance of it - such sites are in the bottom negligible percentage of sites which i might accidentally visit but never purposely do.
Maybe it's too subtle to notice.
Edit: on odeva.nl
This site is intentionally doing it very poorly to make a point. Really, the takeaway should be don't do things poorly. But that's kind of obvious.
I've seen it quite a lot, but apparently I've never seen it done well. It's a very annoying effect that chases me away from the site using it.
This becomes worse for people who just skim content, re-read the text, or want to quickly scroll to a specific place in text
<img loading="lazy" src="image.jpg" alt="..." />It's always awful. This site is exagerated in degree, but in kind it's merely on the scale of awful.
Computers should not waste my time. Even if eyes are 10ms faster than the awful fade, if a million people see it, that's almost three hours of human life down the drain.
And when scrolling fast, or far, it's not uncommon to have it waste a second of human time. A million of those is 38 human working days, just flushed down the toilet, because someone wanted "pleasant".
It's fantastically disrespectful of other people's time.
The web is already slow. No need to deliberately spend effort to make it even slower.
And this is what people have become way, WAY too tolerant of. The deliberate theft of customers' time. While this is obviously a very minor example, there are lots and lots of others that aren't.
I’m a fast scroller and skimmer. Info scroll down and the text is not there I’ll just assume that the site is shot and close it. Ain’t nobody got 200ms to wait for a god damn fade in when there’s an infinite amount of sites out there to discover.
I mean, you might not like it, and that's fair and understandable, but is it really that big of a deal? Surely not.
But yes, in fact if this page succeeds then it's wasting human life on things as productive as spam phone calls. People have solved the latter by simply not answering for unknown numbers.
Not sure what you mean by "fatalistic". To the point where I'm not sure that's the word you mean. It's fatalistic as in fate. Maybe you mean morbid?
Standing in line at the DMV is also all "counting flowers on the wall, that don't bother me at all"? But even at the DMV it's (hopefully) not done maliciously.
> cosmetic inconveniences
Sometimes things suck. That's not remotely as frustrating as knowing that someone went out of their way to make your life worse.
> is it really that big of a deal? Surely not.
If we capped all laptop CPUs to 600MHz, would it really be that big of a deal? Maybe they did it because of the acoustic preference of not needing to spin the fans as much, and therefore you are not allowed faster CPUs?
This is the wrong conclusion. The amount of work that can be accomplished summing one second from 38 million people is approximately zero - much different from stealing 1 day from 38 people or 1 hour from 912.
Apple uses it for their various pages, and it is legitimately annoying-
Tesla is a fan as well-
Occasionally sites use lazy loaded images, and do a "fade in" effect when they're actually loaded. Nothing wrong with that particular use.
Love how that page takes almost 10 seconds to load for the first time on a 200Mbps connection
Once upon a time, developers implemented lazy loading of images, to save bandwidth. However, some developers implemented it poorly, waiting until the moment an image is scrolled on-screen to even start loading it, leading to a visible blip as you scroll.
(The better way would be to load an additional pageful of images beyond the current scroll view, which would provide enough time to load before scrolling into view at least most of the time. However, this doesn't maximally save bandwidth and some developers don't make good tradeoffs between diminishing returns on saving bandwidth vs. visibly degraded UX.)
Then, designers saw the blip-into-view effect, thought it was an intentional visual effect (rather than an artifact of poorly implemented lazy loading), but thought, oh, I'll fix it so it looks nice, with fading.
And here we are with a dumb visual fad originating from a bug without realizing it was a bug.
I'm not against animations in UI design but these should be used purposefully to direct the user's attention on something or for minimal aesthetic effect. When everything is moving it's just like adding a ton of ketchup to everything.
Now the page stutters on every device other than iPhone 16+ with 5G. :shrug:
It's not realistic, though. Illegible sites never get that detail right.
animationCount = 0
animateElement(el) {
el.animate({duration: BASE_DURATION / animationCount})
animationCount++
}
Essentially, for any animation that gets repeated, it should decrease in duration over time. This makes things impactful when they're first being displayed, but they very quickly approach an extremely minimal state, making things feel snappy.
I suffer from pretty severe motion sickness, which hasn’t really improved as an adult, and this page immediately made me feel like I’m going to throw up. Had to switch to reader mode after the first image. I was always the kid who couldn’t read in the car, and was always groggy on long road trips because of Dramamine (side note, Meclizine has significantly improved my life, as it has largely the same effect without drowsiness). As an adult I’m fine as long as I’m in the front seat, public transit is terrible for me. Elevators are tiny torture chambers, especially when stopping on multiple floors. And it’s cumulative, the sensation becomes worse the more I’m exposed to it over the course of a day (I have a mental “theme park budget” in my head of how many rides I can comfortably do!). VR can’t have any motion that isn’t firmly anchored to a sense of place (space ship/driving sims are okay though!)
I’m glad awareness is being raised about this, but I’m curious what websites are using this now? Is it just personal blogs and the like right now? I definitely would have noticed this cropping up on websites I frequent.
Me too! The worst part about this is anytime there's more than two adults in the vehicle, the "front seat" has all sorts of social expectations and courtesies. I once mentioned that I get motion sick when not in the front seat, and I could tell that nobody believed me and thought it was an uncool way to try and guilt people into letting me monopolize the favored chair. After that I don't bother, but do try to avoid shared cars because in those I'll be quietly sitting in a torture chamber while others around me don't understand.
Also, good God those drivers whould constantly gas-brake-gas-gas-brake-gas-brake-brake-gas. I get it when all the sudden traffic rapidly and unexpectedly slows down, but so many people seem to always be pressing at least one pedal, never coasting. It's torture
I don't, and yet I am also feeling nauseated after reading that page! What a truly awful experience.
I think a website is similar to a painting. Some will make you dizzy by just looking at them, and others will be a minimalist dream.
Don’t hate me HN, but I say keep messing with the scroll bar, keep making annoying blinking banners, have your way with scroll fade.
Don’t listen to these web dev veterans, they are just like snobby movie critics!
I truly don't know how this is possible or how should I turn it off completely. There are some settings in Firefox but the ones I have tried do not work.
This is one of the worst things I have seen in many years, along with all the other aberrations that are already spread on the net.
Scrolling to the bottom then forcing me to click "show more"? Lazy. A truly horrible experience. I don't know how anyone could think that is a good idea. The worst offenders are the ones showing me products. You might as well not have pages of products at all. Just tell me these 12 are the only ones you have because I've already lost interest. Not that most web stores are any good - most have no useful ability to search or browse so finding anything is like digging through a junk drawer. It all screams "we hate selling product, please go away".
Next worst? Everything Google makes and all the fools who copied them: scroll down, scrolling hard stops, then a few seconds later the next segment of content loads. The scrollbar position is naught but lies. WHY??? Are you proud of that? Because you shouldn't be. You should be ashamed. Demand-load the content behind the scenes so scrolling is continuous and smooth. If the user scrolls fast then skip pages and/or cancel prior requests. The scrolling is the priority, lazy-load the content as needed... but for f*k sake don't do what Google does.
The top worst: hijacking scrolling for any form of animation or to change direction. Absolutely horrid and I leave any webpage that does this out of spite. This just screams "I'M A DESIGNER, LOOK AT MEEEEE!!!!!". It is code equivalent of being "too clever", but for UX. If you don't want people to buy your product or signup for your service but instead be impressed by your ability to vomit out D-E-S-I-G-N then by all means proceed. Everyone is guilty of this, even those who should know better.
First time I'm seeing a "no AI" used to differentiate a work for hire.
Can't say this wasn't obviously coming. Boutique hand-coded consultancies/software-houses are probably going to spring up a lot.
Fading the entire content very fast, so fast that it's barely perceptible is actually better on the eyes.
Blinking hurts. Fast changing contrast hurts. The fade is a natural effect I use everywhere almost. My eyes never complained, rather are grateful for the small effort it takes to get right
Its like anything though. I think people just thought it was a cool effect and so it wasn't about page speed any more, it was just about something people used to add some panache to their sites.
Kind of like people who've been abusing modals for the last decade or so. lol
And also completely functional and accessible but where's the fun in that?
I think `prefers-tacky` is a brilliant idea! It means excess decorative images could avoid even being downloaded if the user so chooses.
Also: I've noticed a new abuse recently of sites implementing scroll momentum on desktop — has anyone else seen this? I couldn't believe it, but there it was.
It's a inexcusable usability disaster.
(Take this as another excuse not to hijack scrolling behavior, not an actual request you improve your implementation of tacky-mode.)
This is done to hide the change, not as a creative effect. The human visual system is very sensitive to fast changes. But below half a second, smooth changes are not too noticeable. With this trick, plus a slight amount of distance haze, you can get away with quite low detail distant models. That's part of how GTA V does those long vistas efficiently.
Here's a long drive around the GTA V world.[1] Watch how background objects change. Many distant background objects start out with very low detail. Watch power line towers, for example, which are very low detail until about 100m range. The cross-fade to a better model takes about a half second. Active players don't notice.
I don't want your product to spin while I scroll down. I don't want animations or boxes to start appearing or disappearing. I don't want helpful tooltips, popups, or "I hope you enjoyed this" notifications to appear as I scroll.
What I want when I scroll is for the page to move, either up or down, in a completely consistent manner. I want to be able to reasonably predict what I'll see as I go up or down.
Apple loves this shit. Fortunately they aren't AS BAD as they once were, but you'll still encounter it on their product pages.
I also hate infinite scrolling.
I much prefer to have websites simple at all times. I understand that stylish means it must look good and elegant, but this often ends up annoying me to no ends. Without ublock origin I would go nuts. I use it more to get rid of HTML I don't want to see. All pop-ups and slide-ins for instance. These things should never ever happen. Any notification should happen differently, or not at all. Often it is "please donate to us" - I understand their use case, but how is this relevant to my use case?
If you design the animation to be way over the top like this, and then design the page to use it on every line then of course it looks like shit.
This is like arguing against any amount of sugar in food and then shoveling it into someone's mouth to try to prove your point. It's disingenuous and you aren't proving anything. I don't even think the top agreeing comments here are coming from web devs or the target users.
Fading in is justifiable when you're adding new content on top of existing content, and need to draw attention to the fact that something changed in that part of the screen. None of that applies in the case of fade-in during scrolling. The user is already scrolling, everything on screen is moving, and new content is already expected to be coming in to view at the bottom of the window. Adding animations on top of all of that doesn't help anything, and just distracts from and delays presentation of the content the user was already trying to reveal.
But that raises the question...