Skip to main content

Advanced Concepts

This section lists some useful insights in order to get the best from react-awesome-reveal.

Intersection Observer#

Intersection Observer is the API used to determine if an element is inside the viewport or not. Browser support is really good – with Safari adding support in 12.1, all major browsers now support Intersection Observers natively.

If you need to support old browsers, add the polyfill for the Intersection Observer API.


You can add the polyfill directly or use a service like to add it when needed.

npm install --save intersection-observer

Then import it in your app:

import "intersection-observer";

If you are using Webpack (or similar) you could use dynamic imports to load the polyfill only if needed. A basic implementation could look something like this:

* Do feature detection, to figure out which polyfills needs to be imported.
async function loadPolyfills() {
if (typeof window.IntersectionObserver === "undefined") {
await import("intersection-observer");