Unleash the Power of the IntersectionObserver Spell: A Beginner’s Guide

Discover the magic of this JavaScript API and how it can enhance your web development skills

The intersectionObserver is a more advanced spell that has multiple extremely useful implementations. The two most impressive features of the intersectionObserver is its ability to lazy-load elements, as well as add screen aware animations with the help of some CSS.

Lazy Loading

As a wizard, you have the ability to cast spells that can monitor elements within the DOM, and trigger certain actions based on whether or not these elements are visible within the viewport. This can be useful for a variety of purposes, such as lazily loading images or other resources, tracking the depth of a scroll, or animating elements as they come into view.

To use this magical power, you first need to cast a spell called the IntersectionObserver. This spell takes a callback function as an argument, which will be called whenever one of the elements being observed enters or exits the viewport or intersects with a specified element.

Once you have cast the IntersectionObserver spell, you can use the observe spell to start watching an element, and the unobserve spell to stop watching an element.

For example, let’s say you want to lazily load images on a webpage. You can use the following incantation:

const images = document.querySelectorAll('img');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-lazy');
      img.setAttribute('src', src);
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

This spell will select all the img elements on the page and cast the IntersectionObserver spell on each of them. Whenever an image comes into view, the IntersectionObserver's callback function will be called, and the src attribute of the image will be set to the value of the data-lazy attribute, which should contain the URL of the image to be loaded. The IntersectionObserver will then stop watching the image, so the image will only be loaded when it comes into view, rather than all at once when the page is first loaded.

Screen Aware Animations

As a wizard, you have the ability to cast spells that can monitor elements within the DOM, and trigger certain actions based on whether or not these elements are visible within the viewport. With this power, you can add screen-aware animations to your webpage, making it more dynamic and engaging for your users.

To start, you’ll need to cast the IntersectionObserver spell, which takes a callback function as an argument. This callback function will be called whenever one of the elements being observed enters or exits the viewport or intersects with a specified element.

Next, you’ll need to select the elements that you want to animate and add a class to them that defines the animation. You can use a class with CSS transitions or keyframe animations to create the desired animation effect.

Finally, you can use the observe spell to start watching each of the elements that you want to animate. When the IntersectionObserver's callback function is called, you can check whether the element is intersecting with the viewport or not, and add or remove the animation class accordingly.

Here’s an example of how this might look in code:

const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const element = entry.target;
      element.classList.add('animated');
      observer.unobserve(element);
    }
  });
});

elementsToAnimate.forEach(element => {
  observer.observe(element);
});

In this incantation, we select all elements with the class animate-on-scroll and cast the IntersectionObserver spell on each of them. When an element comes into view, the IntersectionObserver's callback function is called, and the animated class is added to the element. This class should contain the desired animation effect, using either CSS transitions or keyframe animations. The IntersectionObserver then stops observing the element, so the animation will only occur once.

Contact me here: LinkedIn | Codepen | Email