4 ms·

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 https:

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 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.

Waterluvian 6mo ago
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.
psychoslave 6mo ago
You are absolutely right!
ayhanfuat 6mo ago
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.”
- SoftTalker 6mo ago
  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.
  - MoonWalk 6mo ago
    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.
    - hedora 6mo ago
      s/micro intentions/micro aggressions/
      - iamtedd 6mo ago
        Replying to the wrong person and trying to replace a phrase that wasn't used. Bravo, you take the cake for low effort post.
        hedora 6mo ago
        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.”
- fainpul 6mo ago
  > creates more delight ARE YOU NOT DELIGHTED?
  - lstodd 6mo ago
    Beatings will continue until morale improves.
apsurd 6mo ago
https://webflow.com/ 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.
mavamaarten 6mo ago
On top of that, that page took 10 seconds to load. On a Gbit network connection, lol
peab 6mo ago
the effect in this example fine though, and not obnoxious like OPs? I don't get it
quietbritishjim 6mo ago
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.
- wtallis 6mo ago
  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.
  - hedora 6mo ago
    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.
- plorkyeran 6mo ago
  It's not as bad because it's a much faster fade in, but I still find it incredibly obnoxious.
RobotToaster 6mo ago
Parts also seem to ignore prefers-reduced-motion.
dreko 6mo ago
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.
h4ch1 6mo ago
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.

Waterluvian 6mo ago

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.

psychoslave 6mo ago

You are absolutely right!

ayhanfuat 6mo ago

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.”

SoftTalker 6mo ago
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.
- MoonWalk 6mo ago
  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.
  - hedora 6mo ago
    s/micro intentions/micro aggressions/
    - iamtedd 6mo ago
      Replying to the wrong person and trying to replace a phrase that wasn't used. Bravo, you take the cake for low effort post.
      - hedora 6mo ago
        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.”
fainpul 6mo ago
> creates more delight ARE YOU NOT DELIGHTED?
- lstodd 6mo ago
  Beatings will continue until morale improves.

apsurd 6mo ago

https://webflow.com/ 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.

mavamaarten 6mo ago

On top of that, that page took 10 seconds to load. On a Gbit network connection, lol

peab 6mo ago

the effect in this example fine though, and not obnoxious like OPs? I don't get it

quietbritishjim 6mo ago

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.

wtallis 6mo ago
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.
- hedora 6mo ago
  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.
plorkyeran 6mo ago
It's not as bad because it's a much faster fade in, but I still find it incredibly obnoxious.

RobotToaster 6mo ago

Parts also seem to ignore prefers-reduced-motion.

dreko 6mo ago

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.

h4ch1 6mo ago

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.