demo · v133

Snapped gallery — snapped query

The third state in scroll-state container queries is snapped. A snap-target gallery uses @container scroll-state(snapped: x) to recolour, sharpen, and label the card currently locked to a snap point — no IntersectionObserver.

swipe the gallery · the focussed card animates in

card 1
card 2
card 3
card 4
card 5
greyscale + smaller = off-snap full colour + label = snapped

the rule

.card { container-type: scroll-state; filter: grayscale(0.6); transform: scale(0.92); }
@container scroll-state(snapped: x) {
  .card { filter: none; transform: scale(1); }
  .card::after { content: "in view"; background: var(--accent-emerald); color: white; }
}

Pre-133: this required a sentinel element per card and an IntersectionObserver writing classes on the active one. Now it's a single declarative rule on the card itself.

see also