Creating Interactive Websites with Intersection Observer API

by Utsab Karki, Senior WordPress Developer

Insights / Website Development / Creating Interactive Websites with Intersection Observer API

Surfing through the web, you will come across sites that have different kinds of dynamic elements like lazy-loaded images, infinite scrolling, or scroll based animations. Besides being a cool feature on the site, interactivity also helps with retention, engagement, and user-experience.

Historically, such interactions were created using JavaScript event handlers and loops to build the needed information for every element that needed the interactivity. Using this method was a source of significant performance overhead for the site as the JavaScript kept firing every time the user interacted on the site.

With the introduction of the Intersection Observer API, which is one of the several Web API’s, the task of detecting a target Document Object Model (DOM) element’s intersection with respect to another DOM element or the viewport has been made simpler and easier to implement. The Intersection Observer API lets the developer register a callback function which is only called when the intersection happens, reducing the overload.

Creating an Intersection Observer

Creating an Intersection Observer is fairly simple. All one has to do is pass a callback function along with the options object to its constructor.

 let observer = new IntersectionObserver(callback, options);

Based on the options object passed to the IntersectionObserver constructor, the callback function will be called if the criteria matches only. The different options that can be passed to the constructor are as follows:

root
Accepts a DOM element that is used as a reference to check the visibility of the target element. This element must be a parent of the target element. The default value is the browser’s viewport.

rootMargin
Accepts values similar to the CSS margin property. This option can be used to either grow or shrink the root elements bounding box. Accepts negative values and percentages as well. The default value is 0 margin on all sides of the root element.

threshold
Accepts a single value or an array of values between 0 and 1. The value or array of values represents the percentage of the target DOM element’s visibility before the callback function is executed. A value of 0.5 means that the callback function is executed when 50% of the target element becomes visible relative to the root element.

Using the callback function, various manipulations can be made to the target element which can be used to make the target element interactive. One of the most helpful properties of the IntersectionObserverEntry instance is the isIntersecting property which returns a boolean value depending on if the target element intersects with the Intersection Observer’s root.

If we wanted to toggle a class on the target element every time the isIntersecting property returned true, we do it as follows.

 function callback(entries, opts){
    entries.forEach(entry =>
        entry.target.classList.toggle('make-interactive', entry.isIntersecting)
    );
 }

In the above example, we toggle the class make-interactive on the target element when it becomes visible relative to the root. Using this class, we can add/update styles or add animations to the target element when it becomes visible using CSS.

Having animations on a website can make the site fun and more engaging for users. Similar implementation can also be done to display relevant content to users based on a section of a web page they are viewing.

Need help implementing interactivity or animations on your website? Reach out to us.