Intersection Observer API Demo

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or viewport.

Intersection Observer: checking...
Visibility
Box 1
Box 2
Box 3
Box 4
Box 5

Observer Options

Scroll Demo

Scroll down to see elements animate when they enter the viewport.

Box 1 - I animate when visible!
Box 2 - Intersection detected!
Box 3 - Lazy loading example
Box 4 - Analytics trigger
Box 5 - Infinite scroll trigger

Lazy Loading Images

Images load when they enter the viewport.

Scroll to load...
Scroll to load...
Scroll to load...

Event Log

Intersection events will appear here...