Support for the Intersection Observer API just landed in Safari in macOS 10.14.4 and iOS 12.2.

Scrolling is arguably the default user action on the web, so having a performant way to respond to this input is incredibly powerful from a design perspective. This complements several other recent features, such as native CSS Scroll Snapping, smooth scroll-behavior, sticky positioning – all of which can be utilised in a progressively-enhanced way with the powerful CSS @supports rule.

As a developer, I’m yet to have my “Ah-ha!” moment with Intersection Observer. I recognise it’s power, and have been lucky to benefit from it’s inclusion on a couple of projects that I’ve been involved in. Perhaps it's because the tutorial for it has yet to be written. Sort of like “Intersection Observer for Designers”, or “Intersection Observer for People Who Think Things Like Intersection Observer are Weird and Hard”. Or maybe we need a cookbook of interesting effects that can be easily shared, tested, forked, and modified.

With support now green across all major modern browsers, I'm looking forward to using and hearing more about this powerful new feature.