logo
Shopify Builds>Primitives>Intersection Observer API

Intersection Observer API

Definition

The Intersection Observer API reports when an element enters or leaves the viewport, or another element, asynchronously and off the main thread. A callback receives only the entries that changed. It replaces scroll handlers that measure geometry on every frame, and it's the browser's answer to work that should happen because of where something is.

Documented at MDN, the Intersection Observer API.

How We've Used It

Almost everything we defer is deferred on this. Widgets mount near the viewport instead of on load, including reviews, shoppable video and carousel libraries, so a page carrying several vendors mounts each one only when its section comes into view. Reveal animations use it too, and there the interesting decision is what to observe: one lead element per grid row rather than every card, so a row appears as a unit and the callback count drops by the column count. Anything bound this way has to survive a re-render, so observers are disconnected and rebuilt when a filtered grid replaces its own contents.

Builds Using It

One further gated build uses it; its page follows.

Related Entities

Builds

Theme-wide section reveal that replaces Dawn's per-element scroll animations

One entrance animation for every top-level section on the storefront, applied from the layout rather than authored into each section — with the hide decided before first paint, the reveal driven by an intersection observer, and reduced-motion and no-JavaScript visitors never hidden from anything.

LUS Brands

Homepage hero carousel v2 - video and split-image slides with per-slide typography control

The live homepage hero: two independent carousels over one authored slide list, video slides and split-image slides, typography controlled per slide, and promotion events fired from the slide's own copy.

Nudestix

Kids featured collection: a custom element that builds its Swiper on approach and wraps the theme's own product cards

A `<kids-featured-collection>` element leaves its slides as static markup until an IntersectionObserver fires, initializes Swiper then, and tears everything down when the section is removed — around Dawn's `card-product`, not a card of its own.

LUS Brands

Layout shell rewritten as a load-order contract: origin hints, two stylesheet tiers and an interaction-gated session recorder

Dawn 6.0.2's `theme.liquid` reworked so that the order things load in is written down: connection hints before the title, stylesheets sorted into a blocking tier and a deferred tier, fonts preloaded, and a session-recording script that waits for the shopper to move.

Nudestix

Deferred LyveCom shoppable-video mounting on the product page

An integration layer that loads LyveCom's widget script once per page and mounts each carousel only when its container is about to enter the viewport — so a paid shoppable-video app stays off the product page's first paint, and a theme-editor reload doesn't mount it twice.

LUS Brands

Mega-menu product rail (v2): a library-free slider in a theme asset, constructed per panel when the panel is seen

The second generation of Nudestix's menu rail — a merchandiser title, a shop-all link and a track of navigation cards — keeps its slider in `megamenu-slider.js`, a small class that measures slide width at move time and is constructed per panel on first intersection.

Nudestix