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.
> creates more delight
ARE YOU NOT DELIGHTED?
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.
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.
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.
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.
You are absolutely right!
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