hckrnws
Something else scroll-related I personally hate:
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.
God yes. For some reason, I automatically scroll in such a way that I always keep what I'm reading at the very top of the screen. Which means that every time I want to reread a sentence I first have to scroll past the header.
Mea culpa: this is kinda my doing. I released a library headroom.js (https://wicky.nillia.ms/headroom.js/) for this purpose in 2013 or something, announced here on HN, and it got very popular. It got ported to every framework imaginable. And tons of websites either used it or imitated it.
I think it can be done well, but most do not do it well. Partially my fault because the defaults in headroom were not how I would recommend it. It had a tolerance option, which meant you had to scroll up so far/fast to trigger the reveal. But in my eternal foolishness I set this to zero by default. Adding a little tolerance makes it much less jittery and more intentionally triggered. And thus much less annoying. See the header on the site, it doesn't appear/disappear with every 1px movement
This only really works easily on desktop and requires a click, but is very satisfying to use:
Interesting, I find sticky headers to be the bane of my existence, and the ones that disappear but reappear on scroll up are a lesser evil
Comment was deleted :(
Screen real-estate for legitimate content is often at a premium and then they go and steal some of that land with sticky headers and or footers. I occasionally run across mobile sites that use both at the same time, while throwing in ads here and there, it's an atrocious experience.
Yes but then I think they should leave the header at the top of the page. If I need it I'll scroll all the way back up! Don't make it randomly re-appear and cover the text I wanted to see because I decided to re-read that last paragraph.
Especially since mobile browsers typically have a shortcut for scroll-all-the-way-to-the-top
I just zap them with uBlock Origin anyway. Whatever was in that header, chances are it was not important.
This is literally the best ux pattern you can have. It is intuitive - user immediately discovers it when performing the obvious action, it increases the user experience (more text to read) without any real downside.
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.
This is only true if you assume users always scroll down while reading and the only reason they scroll up is to find the header... but many of us scroll up and down while reading and find the re-appearance of the header to interfere with our goal of reading the content. So there is a clear downside for us "up and down" readers.
I don't know what portion of users we are though, I'm glad to see I'm not the only one!
I consider it context-dependent. If a site is intended for users to jump around to different pages often, then sticky headers make sense. If it’s designed for long-form articles or scrolling through feeds, then non-sticky headers make sense. When I have implemented them on my own sites, I try to keep them minimal and unobtrusive. But I also have never heard this complaint specifically, until now.
I’m curious if after reading the dozen or so replies you’ve changed your opinion here, at least a little?
For the record, I am also a user who scrolls up often while reading, so I find the header thing more frustrating than useful.
The user discovers it because it is practically forced on them. It is awful UI.
When a user wants to return to the navigation bar at the top he scrolls up. The navigation bar then immediately gets nearer.
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
>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.
On what basis do you make the claim that "It is vanishingly rare for users to scroll up when reading content unless they want to reach the top"?
If I were to judge from the comments here (and my own behaviours) it is quite common for users to scroll up when reading content for other reasons that wanting to "reach the top".
no. Scroll already does that. The header can stay where it is. The most intuitive thing you can do is have the content scroll in the direction the user asked for, when they asked for it.
If they want to go up to the top, they can already scroll. To the top.
> When a user wants to return to the navigation bar at the top he scrolls up.
Users also scroll up when they want to read text that's not visible anymore.
> The navigation bar then immediately gets nearer.
And then it blocks the text the user was trying to read.
That’s not why user scrolls up, or at least not the only reason. For example, reading this discussion I constantly scroll up and down to center the text on screen.
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.
You know what tells people there’s more to read? The fact the sentences are cut and the piece hasn’t concluded.
As for “no overhead” what about all the code needed to implement this?
Pages of text should be minimally styled for maximum efficiency.
>>without any real downside
Wow, impressive blindness!
Seriously, have you ever used one? Because most people do not read monotonically downwards. We often scroll back to see something in a previous sentence referred to in the spot we are reading. So we want to go back one or two lines. Bot NOOOOooo, the header pops up, covers 1/4 of the screen, so now we have to scroll that much more, pushing off the screen the other text we hoped to keep on the screen, and it might even go through a few adjustments. So, now, what was a non-event less distracting than turning the page in a book or magazine has now become a fully distracting scroll-fest.
Is that clear enough for you?
>>This is literally the best ux pattern you can have.
NOT EVEN CLOSE. The best User Experience pattern is to give the reader what they asked for AND NOTHING MORE. Nothing more for you, nothing more for your advertisers, and nothing more for them. We click to read the content, LET US READ the content, ALL the content, and NOTHING BUT the content. We'll even understand if some proper STATIC adverts are placed in the content, and we might even click thru if you've shown us something relevant and interesting
But as soon as you start putting motion and other distraction in the adverts, my priority becomes NOT reading the advert, but figuring out how to get it out of my face. And if by some chance I remember it, it is filed among "companies to avoid".
Why does it seem everyone who deals with advertising, from the execs down to the programmers, so stupidly thinks only of the first-order effects — "Grab Their Attention!" — and not the second-order effects, where being so offensive — surprise! — offends people...
It's awful for the user. There is no reason why scrolling up should perform any other action then scrolling up the content. Zero benefit for anybody involved.
It might be useful if you wait until the user has scrolled more than 20% of the viewport and not pop it out immediately.
I absolutely hate it. If you haven't heard a complaint about it, you haven't tried hard enough to get feedback.
There is no context which makes it OK.
You could just have a "hide bar" button. Dunno how you get it back, maybe put your design smarts there.
Stop making things "intuitive" and expose explicit options to users.
Comment was deleted :(
Also if anything it should disappear when scrolling down and appear when scrolling up.
That's how they work. It's what the GP said.
I accidentally had it flipped backwards in the original comment, and edited it to fix that. So the person you're responding to was right at the time.
Oh. This. Tho I solved that with userstyles.
Joke's on you, we implement all animations in JS
Safari has a "Remove Distracting Elements" feature. Try that. Some web sites can only be visited with the weapons of an exterminator at hand.
This! And to make matters worse is the header is removed from the document flow, causing the content to jump up when scrolling down. And if you then scroll up to try to read the content that jumped out of the viewport, the stupid header is injected back into the flow causing the content to jump down again. Sigh.
Comment was deleted :(
ZeroHedge is one of the worst offenders for this.
Oh god yes I absolutely hate those. Who on earth thought that was a good idea.
There is a special circle in hell where designers of such sites have to actually use the sites they design.
someone designing for mobile first and wanted to maximize screen space. we don't have to be obtuse about it. it was an idea that just didn't go over as well as hoped. clearly, some people like it. it's not your cup of tea, great. now, we all know your feelings. next time i build a site, i'll be sure to get your opinions first.
> maximize screen space
But it's not maximizing it, that's the whole problem. It keeps coming back and blocking the line I'm reading. If they actually wanted to maximize screen space, it is trivial to just leave the top bar at the top of the page and not make it reappear when I scroll slightly back, no js/css needed.
It's not that hard of a concept to understand is it? You scroll down to read content so it disappears to maximize screen. If you start to scroll up, there's a pretty decent chance you might be wanting to go back to the top. If so, here's a shortcut. If not, then yeah it's annoying so you scroll up a bit and then scroll down again to make it go away. It's not the worst idea. It's not something everyone likes. I'm not exactly a fan, yet I'm not so distressed by it as others like yourself. It's less annoying than liquid glass to me.
Others have tried saving undoing scroll to the top with buttons that appear in the margins with "Back To Top" labels. Is it better? worse? It's just another idea. Scrolling all the way back to the top for site navigation on longer pages is annoying. Nothings perfect.
You cannot please all people all the time.
This kind of malaise is why everything feels mobile-only now.
Comment was deleted :(
Even on mobile, where I most frequently encounter it, it really stinks. I don't know where you found any personality who actually likes it, outside of your own head.
If you really must show me the content of the header because in your judgement I can _NOT_ be left alone to read the article I opened instead of your critical header info, show me first and once, and let me access it again off the hamburger menu if it's that damn important.
If you know so much about how people actually use the web, you would also know that they almost NEVER actually see or read what is in those damn drop-down or pop-up headers/footers.
Dead serious, you could monitor me, and 10sec after I dealt with one of those headers, offer me a million dollars to tell you what was in it, and if I didn't you'd shoot me, you'd shoot me 999 times out of 1000. I may be a bit better self-trained for ad-blindness than many, but I know I'm nowhere near unique.
Whoever is selling them to the advertisers is defrauding them.
>>next time i build a site, i'll be sure to get your opinions first.
Seriously, with that attitude, it is obvious you think you are so much better than every reader that you do not need to check their opinion. And it is even more obvious the opinion that needs to be held in check is yours.
> I don't know where you found any personality who actually likes it, outside of your own head.
That's probably because I don't like it myself. You thinking I did like it is something in your head.
As a developer, I can understand why it was created. Sometimes, ideas sound good as a concept, but you really don't know if it is or not until it's actually done. I find this much less annoying than sites that hijack the scroll bar to do their own cool scrolling. For somethings, it's neat. Kind of like some Flash sites did some cool things. It's the ones that try to be like the cool thing but have a totally different site where it just doesn't fit. Those are the really annoying sites. I don't like a lot of the way lots of other developers have implemented things. I just make a note of something I found annoying, and avoid doing that thing on my projects. I'm only able to do things I'm in control of, and try hard to recognize when it's not in my control and just move along. I don't let it ruin my day.
same thing intersects with ios safari when it hides top and bottom tool bars, hate that too.
and with the website doing the same thing, it's a mess.
[dead]
> 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.
"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.
I want a reader mode that renders the page as if it were in an extremely tall window (ie. 10+ screens tall), then gives me a scrollable view of that static image of the rendered page. My browser should lie to the page on my behalf, and make it behave as if everything were already on-screen.
Materialistic[0] effectively does this (minus the screenshot part), not intentional I think (I belive it makes the webview as tall as the requested page and then uses the OS native scroll widget to add a scrollbar for it). The problem I regularly encounter with this is sites that have a vertically centered popup (cookie banner, newsletter, etc.), with a backdrop that obscures the whole page. You first have to scroll down quite a bit (half the size of the article) to be able to click the popup away.
the reason "reader mode" isn't the default is to discourage website authors from intentionally breaking reader mode
-_-
This. It's fundamentally a social problem. The moment that reader mode becomes the default, they'll start gradually extending it with "useful" additions until it's just as bloated and painful again, and then we'll have some rebrand of the concept of reader mode, and the cycle starts anew.
"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
Presumably, if reader mode is to never allow any website-programmable interactivity ever (as I would expect), it would be much harder to do, though.
Sure, but that's a big if: "Oh, just this one small thing for interactivity would be nice ... and this other thing ..." just like with how the early web expanded functionality.
s/discourage/avoid encouraging/ but yes.
On MacOS and iOS you can set reader mode as default. You should set reader mode as default.
what a good idea to have this automatically come up when the page opens, and perhaps give user a few seconds to press escape to get rid of it, if needed
Why just a few seconds? In reader mode you can press escape any time to close it.
"should have to enable "Clown Mode" or something."
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.
Big Sur made me take back every Fischer Price comment I ever made about Windows XP. I didn't think it was possible to make a more childish UI than Aqua, but here we are.
Hey, at least we're finally spared the infantile "MY this" and "MY that" nonsense that dominated the early 2000s.
I like that Apple was trying somwthing that has a little more texture and soul to it, but Liquid glass needs a lot of work to be made more subtle and usable. 10 out of 10 idea, 3 out of 10 execution.
I actually think modern windows looks nice. It isn't nearly as good as the classic 9x look, but fluent obviously is a response to the visual shitshow that was 10
It's just a bunch of text and maybe some horizontal lines. It manages to take "flat" design and make it even worse.
The list of regressions is seemingly endless. Where are the menus? Oh... scattered all over each application's UI, behind multiple hamburger buttons. What application does this window belong to? Who knows, since the title bar is missing.
And WTF is up with the abandonment of the File dialog? Now, every application presents a crude, inscrutable text-based form with no context showing WHERE you're putting anything.
No offense, but it's incompetent garbage.
Oh yeah the UX is absolute doodoo but I think the design system itself looks nice
I thought this was going to be about iOS and how now (as of iOS 26) there is a "fade out" at the top of every web page (around the notch/top-edge area).
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.
Even better iOS example of not just "scroll fade" but regressive and incompetent UI design: the moving of Music's playback controls from the empty area at the top of the window into the content-browser area... where the controls are "transparent" and overlap the text and thumbnail images there. And all that stuff in the content-browser pane? Yep, it scroll-fades.
I turned on "Reduce Transparency", and instead of a fade, it turns the top and bottom sections of the screen into blank white space.
My "edge to edge screen" iPhone now resembles the last generation of iPhones with home button from 2017.
On iOS 26 (up to date as of this comment), the Orion web browser from Kagi does not have this problem.
It also supports firefox and chrome extensions, so you can use things like UBlock Origin and Privacy Badger.
Neat observation; I am an Orion user, too, for certain things.
But doesn't the latest Orion on iOS 26-latest just turn the top section a solid color (e.g., web page background-color), simply not showing any text up there around the notch/top-edge? As the parent said about the accessibility option, "...resembles the last generation of iPhones with home button from 2017" (albeit, at least not solid black/white only)?
Previously on iPhones, IIRC, we got text scrolling up above and around the notch/icons, to really make maximum use of the screen (except where truly unavoidable), IIRC.
AFAICT, Orion and the accessibility setting do stop the fading-distraction, but do not restore the use of that screen space for text/content.
Comment was deleted :(
It's that bad?
How about they give us back small iPhones with 4" screens then and whoever wants the fade can imagine it outside the physical phone?
On my iPhone 13 Mini, the space dedicated to showing browser content is around 4.25" diagonal with the Safari fade, so we're not that far off.
I've managed to avoid being tricked into upgrading to 26 so far, and every week I find a new reason not to.
The poster seems to be implying that this effect is prevalent across the web, yet i'm seeing it for the very first time on that post. (And, indeed, it's annoying. My eyes can't read when there's animation going on nearby.)
The goldfish animation along the bottom is epic and i will have to mine that bit for reuse somewhere :).
Anthropic uses it across all their websites, here's a typical example where the effect is obvious as you scroll down: https://claude.com/solutions/agents
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.
It is partly to blame, yes. This is from Claude’s official frontend skill:
“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.”
Who thinks like this? The last thing I want on a website is surprise. I want to do what I came there to do, the same way it worked last time, and then get on with my day.
On a Web site or anywhere else. Apple, Microsoft, "flat design," and peek-a-boo UI all insult the user and waste his time by turning an important tool into an Advent calendar.
s/micro intentions/micro aggressions/
Replying to the wrong person and trying to replace a phrase that wasn't used. Bravo, you take the cake for low effort post.
I was replying to ggp. I did misread micro-interactions, but my point still stands.
“Eloquence is the essential thing in a speech, not information.”
> creates more delight
ARE YOU NOT DELIGHTED?
Beatings will continue until morale improves.
That's a bit different since those are separate chunks of content rather than running prose (and they're mainly meaningless marketing fluff anyway). I don't find it all that annoying compared to the original article.
It's still incredibly insulting to waste the user's time trying to force them to read the page sequentially instead of being able to immediately scroll to the chunk of content they are actually trying to find. Especially if it is not the user's first visit to the page.
Studies show that viewer comprehension is strictly worse for presentations that use “build” animations vs ones that do not.
I assume the study results would be the same if they were repeated using fade scrolls.
It's not as bad because it's a much faster fade in, but I still find it incredibly obnoxious.
On top of that, that page took 10 seconds to load. On a Gbit network connection, lol
I used to inject a prefers-reduced-motion: true to most websites a few years back when this trend really picked up; and generally have all animations turned off at the OS level and at least on mac that injects reduced motion preference to the browser.
So for example on claude's website I get no animations, pretty good QoL improvement. Now webdevs HONORING prefers-reduced motion, that can vary.
https://webflow.com/ is what i blame for the fade-in on scroll module.
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.
This is a great example of LLM feedback loops. Anthropic's site uses scroll fade, Claude's training data includes Anthropic's site, Claude recommends scroll fade to users, those sites become future training data. The web converges on one aesthetic and nobody remembers choosing it.
Are the little hand animation graphics meant to flicker like they're an epilepsy test? That was so awful I didn't have brain power left to notice the fade scroll.
Parts also seem to ignore prefers-reduced-motion.
the effect in this example fine though, and not obnoxious like OPs? I don't get it
You are absolutely right!
> The poster seems to be implying that this effect is prevalent across the web
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.
> 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.
It definitely isn't prevalent, and usually is for "feature" pieces (like an expose on the Washington Post back when they were a real newspaper), along with product pages.
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.
> https://www.tesla.com/models
Love how that page takes almost 10 seconds to load for the first time on a 200Mbps connection
I was redesigning a website of mine and Claude suggested to add this as an animation. My theory is that, if claude is confident in a suggestion, a lot of other people have done the same.
Maybe it's too subtle to notice.
Edit: on odeva.nl
The scroll fade on that site is comparatively inoffensive (comparatively), because you messed with scrolling itself, which is one of the worst things you can do, taking over and ruining inertia. You’re literally going out of your way to make things worse. The ONLY time scrolljacking of any kind is acceptable is for things like maps where there is no “normal”.
Or for a game, where it's part of the interface.
Got an example of what you mean? Because if you mean the only thing I can think of, I very strongly disagree.
Hijacking native scroll behavior to badly reimplement anything remotely like scrolling is wrong even in a gaming context. But if you're implementing Half Life 2 in a browser, where the user no longer has a normal cursor, then hijacking scrolling to implement the weapon switcher is fine.
Yes, that. Or some weird experimental stuff, like running an emulator for the Playdate https://en.wikipedia.org/wiki/Playdate_(console) or whatever. Games are allowed to be a bit wacky, and no one is forced to play them.
You probably haven't noticed it before because when it's done well, it's a subtle and pleasant effect that can be used to draw your attention to particular elements on the page.
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.
> when it's done well, it's a subtle and pleasant effect
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.
Fade in in scroll will always be slower than the reading speed of a significant percentage of population.
This becomes worse for people who just skim content, re-read the text, or want to quickly scroll to a specific place in text
It can speed up the loading of the above-the-fold content because the images on the rest of the page can be loaded as the user scrolls closer to them.
You can do this with just the 'loading' attribute on img elements and let the browser handle it without the gratuitous animations:
<img loading="lazy" src="image.jpg" alt="..." />So you agree that for text, it should NEVER be used. And you are only arguing for lazy loading of images?
> when it's done well
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.
"It's fantastically disrespectful of other people's time."
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.
Agree 100%!
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.
> million of those is 38 human working days, just flushed down the toilet, because someone wanted "pleasant".
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.
It doesn't matter whether useful economic work can be accomplished with savings of one second per person. Directly inflicting frustration one second at a time is still a bad thing.
And obviously, those seconds can add up to meaningful time wasted even on an individual basis.
> The amount of work that can be accomplished summing one second from 38 million people is approximately zero
First of all, I said one million people, not 38 million people.
But second (no pun intended), this waste of human life doesn't just aggregate across people, but also for multiple offenders one any one particular victim.
A second on this website, a second on that site, a 10 second "loading" animation screen on a blog. It adds up. It adds up to all individual users actually wasting their life and productivity.
Your implication that it's fine to willfully waste a second from a million people is either not understanding what "a million people" means, or a borderline psychopathic disregard for other people.
You can also throw your trash on the ground, because really, is the city measurably worse off just because of you throwing just two candy wrappers in the park once a day? If someone accidentally drops trash, or makes a slow website because they don't have skill or time to make it faster, then that's a completely different matter.
I don't have a strong opinion either way on the effect, but I do have to say that I always find it amusing how fatalistic HN can sometimes be over the most minor cosmetic inconveniences, couching them as "wasting (large amounts of) humanity's time" and "disrespecting people" as if we're talking about something far more serious than little animations on a webpage.
I mean, you might not like it, and that's fair and understandable, but is it really that big of a deal? Surely not.
I mean, like the other commenter I would just close the page instead of enduring it.
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?
They didn't go out of their way to make your life worse. They went out of their way to design something they thought you would like, but you didn't like it.
No, they went out of their way to design something they thought would impress in a demo to their management.
> They didn't go out of their way to make your life worse.
Most people don't, and yet they still make our lives worse.
[dead]
Comment was deleted :(
Not doing it at all would be better still. It's really annoying.
Yes, if you make things only slightly worse it's better than if you make them a lot worse. But neither is quite as good as not deliberately making things worse.
I’ve seen the mostly in personal website templates used by people that would have had very sparkly MySpace profiles had they been creating for the web back then.
Are you sure you don't have prefers-reduced-motion enabled? I just found out I already have it enabled when I went to look for how to enable it...
> The goldfish
It goes where you click in the water area
I feel like the scroll fade fad is misunderstanding layered on bugs, turtles all the way down.
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.
If you opened any "web design awards" website you'd know how terribly wrong you are.
People will animate the sh out of any element exclusively for you to go "wow". It does not go much deeper than that. Designers and developers spend weeks scrolling up and down completely disregarding content. It looks cool, nothing else matters.
...is that really the story? It feels like these are two related, but different things.
I'm not sure it's feasible to prove or disprove how this design trend started. I wouldn't be shocked if it was true, but I also wouldn't be shocked if it wasn't. I'd be more surprised if we ever found out for sure one way or another than about what the truth is.
I haven't dug into the history to see if this is really how it happened. I'd actually feel better if it wasn't true but it's the thought that occurred to me when I noticed the scroll fade effect becoming popular.
Hah, the point has certainly been made. Absolute Barf-o-Rama.
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.
> As an adult I’m fine as long as I’m in the front seat, public transit is terrible for me.
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
Oh good, I'm not the only one. Right now, I have an ocular migraine from a few minutes on that website, and I'm trying not to revisit my lunch.
I suffer from pretty severe motion sickness
I don't, and yet I am also feeling nauseated after reading that page! What a truly awful experience.
I raise you one. Death to the parallax scroll. In fact, death to all scroll animations.
Scrolling should just move a fixed size view up and down a fixed sized page. Why on earth must everyone complicate it so much?
I don't understand why browsers ever let designers fuck up the scrolling mechanism in the first place. Why is that even possible?
Browsers have handed way too much control to web developers. "The web as a software SDK" was a terrible idea.
My biggest annoyance: letting scripts control the history. I can imagine that someone thought "oh it'll be nice, you can use it for pages of an app". But the reality is that people are not nice and it gets used maliciously all the damn time. It should not be allowed.
The web should be a method of delivering documents exclusively, and be limited to the kinds of things you can do with other computerized documents (the basics, but also Audio, Video, Animations, hyperlinking, etc.)
I'd be okay with locking these heavily-abused features behind a "web app mode" that the user has to enable on a per-site basis. It should include a restriction forcing all content to come from the same origin, so that the browser in that mode won't make it easy for web apps to include third-party tracking or advertising.
Death to scroll event override in general. Messes up my vimium smooth scrolling.
Real parallax is fine if done well. A subtle image parallax looks great on some websites. If you're talking about "move any random element at different speed without rhyme or reason," then yeah, I agree with you. We all hate it.
Absolutely.
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.
I worked for a client who was all about scrolljacking. Then he discovered parallax effect, and there was no looking back. He fired me, and got another team who didn't have any opinions.
Now the page stutters on every device other than iPhone 16+ with 5G. :shrug:
Gotta love the attention to detail at the end, that is illegible when selected too.
It's not realistic, though. Illegible sites never get that detail right.
They usually inhibit selection to protect their sacred text.
Scrolling is broken by everyone everywhere.
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.
I'll add having a floating header that covers the top portion of the page, and only appears when you scroll up. I like to read text in the top third of the page, then scroll down so the lines I'm reading are still in the top third of the page. With the height of my monitor that's the most comfortable position, this should usually be the case if following common ergonomic guidelines. If I scroll up, very often such a header will appear & cover the text I was trying to scroll up to read, so I have to scroll farther. Then it's visible, so I scroll down to move it back up to the top portion of the page as the header goes away. Lather, rinse, repeat, install a uBlock origin filter to get rid of floating headers.
You might want to take some time off the internet, I can smell your liver from here.
The internet sucks, it always sucked, most people don't know how to do anything properly, trends ruin everything else. It's always going to suck, most things do. Time to take a chill pill and learn to live with it.
There's a very simple fix I typically do when it comes to animations:
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 couldn't do the mandatory onboarding training at a job once because the course web app had heavy scroll fade, and I got nauseous after a few minutes. I tried every few hours for weeks. Eventually I said I couldn't do it. They had to print it out to pdf for me, and gave me a pass on the courses that were dependent on animation to work.
It's amazing how web graphic designers don't realize 99% of all added motion/animation is just as annoying and unnecessary as <blink> and <marquee>.
Oh they know, but it's requested because clients want a fancy website, and just having fucking text on the fucking screen explaining what you fucking sell is boooooring.
And also completely functional and accessible but where's the fun in that?
Yep. And then complain how it’s not loading/stuttering. I guess we need a new website…
In reader mode on iOS 26, there is some scroll jank, presumably due to hidden scroll fade.
(Take this as another excuse not to hijack scrolling behavior, not an actual request you improve your implementation of tacky-mode.)
It’s kind of like when someone wants you to read something, so they hold the thing to read for you and read it out loud, while moving their finger at the words they’re currently reading. I know how to read!!!
I can only add another aberration that it just started to happen on my browsers without even updating or doing anything at all: I get the master volume raised, I mean not the YouTube volume, but the volume that is reported in my OS.
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.
I've always been under the impression it was lazy loading the page to increase page loading times for content above the fold? At least this was why I started using it about 8 years ago.
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
I'm not a web dev but if the goal is to improve load times, I'd think it would make more sense to load the full article text up front, and lazy load heavier data like images and video? I've seen a lot of websites that do it that way.
But then a fast reader might be able to read faster than the ads could load!
My favorite part of the iPhone 17 pro / ios26 combo is that it lags on any and everything that remotely touches the GPU like this website.
No stutter on iPhone 12 18.5
Next phone will be an android at this rate if Apple can’t solve this garbage
Why do web animations get so much hate with the HN crowd?
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!
Most websites are not a piece of art made only for its own sake an beauty (or lack thereof). The unstated intention of most websites is to transfer information to the reader. Making the reader dizzy, or hiding some of that information behind animations or stupid headers does not aid information transfer.
Because it's just as tasteless as the beginner who discovered the font dropdown and chose Papyrus. Yeah we're all marvelling at your web coding prowess -- has the actual content shown up on screen yet?
Reminds me of me the https://motherfuckingwebsite.com.
> Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee)
Ah yes, taste. That thing that is definitely NOT subjective, and NOT influenced by cultural norms and personal preferences rather than universal standards.
Yes you are right, guess you guys do have better “web taste”.
Why would anyone prefer pics of hipster drinking coffee over plain text?
I just want to read the site without having it jump all over the place. If it's running away from my eyes it probably doesn't want to be read so I just skip it. Probably wasn't important anyway.
They get hate because they are almost always annoying and distract from the actual content. Nobody cares how creative your web page design is if it sucks to use so badly that a plain text page would be better.
But do they really suck to use so badly? Like for real? The examples that have been listed in the comments (Apple and Claude sites) look totally fine to me. People here are talking about them like they are the worse websites ever.
Apple pages are _completely_ unusable because of this. If I go to product page I am unable to navigate it to extract information about the product. I give up and leave.
https://www.apple.com/macbook-neo/
Try to skim this page to get a sense of how much information is on the page. You can't. 90% of the scroll time is stuck in useless animations.
Every time you scroll down you have to wait for the page to render. We've somehow recreated the dialup experience with single page apps.
Your brain is trained on how scrolling works on 95% of pages. Breaking that patterns causes tons of cognitive overhead. You now have to do a double-take every scroll action when you just want to absorb the contents of the page.
I get your preferences, and I am tempted to agree with you because there is a lot to hate about Apple.
But… this website is an ad. It’s not a product spec sheet. It’s not meant for you. It’s meant for people who don’t know a lot about computers or the web, and it’s meant to make them feel something about the product. Its goal is not to present data clearly. And as much as we may hate it, it does a brilliant job at what it’s trying to do. I think dismissing that because you are too deep into the “right way to make websites cult” is so shortsighted.
Are you actually trying to use any of those sites to get something done, or are you just looking at them and evaluating them as a piece of modern art? Because if you're actually trying to figure out which laptop to buy, Apple's web site has a lot of crap that gets in the way.
I agree with you. Personally I hate it. I was trying to figure out the specs of this laptop because my sister asked me if she should buy it. I had to do a lot of clicking.
But this site got my sister excited about buying the laptop. The stupid animations worked. And I am sure if this was presented to her as a simple html page with a white background and some text it just would not have had the same effect.
Like it or not, most websites are just ads. Interactive billboards. They are not there to present data to you in the best way possible.
I'm guilty of this as well. https://kraa.io/about has some fade-in animation for the intro text – driven by wanting the initial impression to be focused/minimal and 'unravel' as you go. I take it that most HN folks would vastly prefer to NOT have this?
I’ll say as someone who suffers from severe motion sickness and the OP site makes me feel deeply uncomfortable, that your site does the fade in fast enough that it doesn’t give me any discomfort. Seems fine to me. Maybe I should consider being a consultant for vestibular motion sickness accessibility, haha. I’d get paid to answer “on a scale of 1-10, how pukey does this app make you feel?”
Comment was deleted :(
I think it looks fine except it's missing a more obvious hint that there's more to see when I scroll. The one that's there is just textual and very delayed.
Not sure if I second this or not. I did want to scroll, but I don't know how much of that was influenced from the context or the extreme minimalism making me want to look for more - I'm interested in how I would have reacted to the site not knowing it had scroll fade. I could see an argument with the "Don't Make Me Think" principle.
I'm someone who loves over-the-top, creative-for-the-sake-of-creative web design, even for something primarily text-based like a blog post, I 100% sympathize with and want to accommodate those who don't.
I think `prefers-tacky` is a brilliant idea! It means excess decorative images could avoid even being downloaded if the user so chooses.
I used to use WikiTok [1] on my phone at times, but now they’ve introduced »words appear word by word« on the mobile version. Baffles me, why one would hide and gradually reveal any sort of content. It’s nauseating!
Looking at the main site, seems like it's branded as a "no AI frontend consultant".
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.
Amen. So cathartic to see someone publish the post I've been wanting to write for a while, and with a much better title.
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.
Sites overriding scroll behavior to implement their own smooth scroll behavior with the wrong speed has been a thing for many years. It's a bit harder to notice if you're using a traditional mouse wheel, but is really easy to notice on a decent laptop touchpad.
It's a inexcusable usability disaster.
I wish this blog stopped the scroll fading after it made ita point. would have really hammered it home.
Bonus points when they offset the scrollbar 1px from the edge of the screen so you can't click on it easily. (If you're lucky enough that they've merely made it 3px wide instead of removing it altogether!)
I thought scroll fade was going to be that thing where, while you scroll, a newsletter popup box slowly fades into view. (I got one on the next HN post I clicked after this one!)
As always with this stuff, it's only bad when you notice it. When it's done right you just think "That was a nicely designed page".
This is why I chose a fade-in reveal https://www.rgbjoy.com/
What sucks with scroll fade is when it fades slower than one can read or scroll.
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
The motion of the scrolling already ensures that the new content is revealed gradually. There's no need for a fade-in animation on top of that. It's just punishing the user for scrolling too fast.
Death to Scroll Bar size change!!!
This website has a slow and laggy implementation which unfairly shows off the effect.
Originally read the URL as “D-Bus Hell dot com” and was like… yup.
Oh yeah. Fucking hate this. Apple does it with their product pages. You have to swipe like crazy and it’s impossible to move past their pictures / animations to get to the next text block until they’ve decided that you’ve seen enough. Another one of those “this can’t have actually been used by anyone at Apple” things they seem to do so well recently.
I mean, fine, I don’t love scrollfade either, and I realise this site is trying to prove a point but, FFS, most of the problems can be solved by forcing the scroll fade to complete in 100 - 300ms as opposed to some glacially slow multi-second pace.
Like I say, I don’t love it, but when we create sites we all have control over animation durations and there’s enough UX guidance around response times to easily avoid it completely sucking.
So the real problems isn’t scrollfade, it’s that - in the face of overwhelming data - it’s both mandated and implemented poorly by people with no taste.
If you’re going to implement any animation of any kind at least do us all the bare minimum courtesy and take 5 minutes to do some research into what works and what doesn’t first.
There are no bad animations, only bad designs.
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.
Animations need to to serve a purpose.
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.
Scroll-fade does serve a purpose when used correctly, and others have posted real world examples of this already. It's so subtle that without them hardly anyone even knew what this blog post was ranting about.
It's just a way to draw attention to text without solely relying on typeface modifiers.
The real designs bring attention to what users are scrolling past as it flies by on the screen. That temporary urgency is why it's an animation. This is something that weight, height, underline, etc. cannot do as clearly. It's usually on the h-tags only, not every single line. That communicates the page structure too. It's clever and attractive when done right. It's not a new idea, and nobody was complaining about it until now.
> It's just a way to draw attention to text without solely relying on typeface modifiers.
Adding animations to bring attention to the thing that the user's attention is already focused on is not useful.
> The real designs bring attention to what users are scrolling past as it flies by on the screen. That temporary urgency is why it's an animation.
Did you mean to say "the good designs"? Because there are most certainly many real designs in the wild that badly abuse scroll fading to delay the appearance of all content below the fold.
> It's usually on the h-tags only, not every single line. That communicates the page structure too.
Making only the headings fade on is definitely something I see less often than the more blunt approach of having everything (or almost everything) fade in. And the message it sends to the user is that the text of the headings is not worth reading, otherwise the designer would let those words show up first.
> It's clever and attractive when done right. It's not a new idea, and nobody was complaining about it until now.
It's mildly annoying at best, and has been widely hated and criticized for as long as people have been doing it badly.
If you sped this up, and minimized it to the point it was unnoticeable, it would not hurt the browsing experience.
But that raises the question...
This terrible idea is a parody of a good idea from game design - LOD cross-fade. When a distant object changes from a low level of detail representation to a higher one, or vice versa, the change is best done as a cross fade. The old one fades out to transparent, the new one fades in from transparent.
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.
It works for games because the fade-in of distant objects happens long before the object in question becomes the focus of the user's attention. It cannot work well for scrolling a web page because getting to the new content is the entire reason the user is scrolling the page, so they're going to be looking right at it (and trying to read it) during the fade.
Really, almost any animation or hijacking on scrolling should be abolished. It's one of the most disgusting things to encounter on a webpage.
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.
My least favorite by far is the “multi section” webpage design. Where the page is split into multiple whole-screen sections and scrolling the mouse wheel alternates between either moving between sections or playing the animations of that section. Yes please make my scroll wheel only sometimes actually scroll the page and other times rotate a graphic for way too long thanks
Agree. I understand why people like those animations and sometimes even i want to implement these in my website with GSAP, but then i remember that these animations make my content harder to read.
Another major pisser is sites that deliberately disable zooming on their mobile incarnations. WTF, WHY? My favorite was when Google imperiously declared that it would "punish" "non-mobile-friendly" sites in their search results... but then disabled zooming on its own pages.
The HTML of that last paragraph sent me lmao
do not the scroll
i will umatrix you
[dead]
[dead]
[dead]
[dead]
[dead]
[dead]
[dead]
[dead]
[flagged]
[flagged]
[flagged]
Comment was deleted :(
This is the modern day blinking HTML tag.
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?
Crafted by Rajat
Source Code