#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it (use Canary for the scroll-state() support)

Left, personally I still wish there was an easier way to do something like :stuck but I understand the reasoning behind not doing it In my own codebase, I actually support :stuck in tailwind via a custom `stuck` variant that uses JS IntersectionObserver API behind the scenes 😁

scroll-state(stuck: top) is pretty easy But yeah, not a one liner

AI-first pull request reviewer with context-aware feedback, line-by-line code suggestions, and real-time chat.

Like all of the other replies this example is designed for trigger. Driven animations I'd argue are for cases where every individual intermediate frame is equally "correct"/desired. I feel like a lot of the driven examples Ive seen are actually subtly trying to be triggered

Agree! but I also see the inverse, a page covered in triggered animations that woulda been better linked

The in-between state of the scroll driven animation isn’t very pleasant. I would only want background or no background with a transition between states

Couldn't you set the right one to trigger after 1px though?

Yep, but sorta.. it could easily make it visible, but it can't simply trigger an interruptible opacity transition. to trigger a transition, you gotta do some tricky work, as it's unnatural to how scroll driven animations work

I prefer right, it feels more obvious what is going on. Left feels too abrupt

Neither. I absolutely hate web pages where things like headers change opacity, or shrink/grow as soon as I start scrolling.

I prefer the left one, but I would also change the colors of the login button when the header is white