Welcome to the Intersection Observer playground.

👇🏻 Scroll down 👇🏻

🤓 👉🏻

Look at the dashboard and its configurations.

Play with the dashboard and try different configurations and learn how the Intersection Observer behaves.

For instance, change the threshold to 1 and discover the difference in the moment the card gets visible.

👁 👁

Try out the rootMargin configurations.

As you scroll, play around with the rootMargins and see how the cards disappear or appear as the rootMargin overflows the card. This is easier to do using percentages instead of pixels.

All of this can be combined with the threshold to get the desired behavior.

🤓 👉🏻

Get to know the playground.

Nice huh 😎?

Some more, just for fun 🥸


This one works... or does it 🧐?

As you see, this card doesn't show up if you set the threshold to 1.

The reason? The card's height is greater than the viewport's height. This means that the card will never be able to show 100% of itself while intersecting.

This is the last one 🥸

I hope you found this useful.

I am wondering if doing an upgraded version of this that plays around with different thresholds would be valuable. Feel free to leave a comment or a tweet.

If you want to learn more about this I'd recommend giving a read to the article I posted on Medium.

Follow @wilsotobiancoStar

Intersection Observer


Automated scroll

👇 Down👆 Up✋ Stop

rootMarginTop: -250px

rootMarginBottom: -250px