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

Threshold: 0.5

Root Margin: 0px Apply Settings

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...

Event Log

Intersection events will appear here...