I want a CSS pseudo-selector for elements that are in the viewport

[aarongustafson]

The kind of effects this can help with are currently done with an IntersectionObserver, but it would be nice if style changes could stay in CSS. Maybe a :in-viewport (and :seen) selector. A use case would be animating titles onto the page when the user scrolls down to it:

h2 {
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity transform;
}
h2:in-viewport {
  opacity: 1;
  transform: translateX(0);
}
h2.stay-visible-after-animating:seen {
  opacity: 1;
  transform: translateX(0);
}

---

https://webwewant.fyi/wants/63/