Using an Observer to animate elements on scroll

The IntersectionObserver is a powerful tool for detecting when an element appears in the viewport. This can be useful for a variety of applications, including animating elements on a page as they are scrolled into view. In this article, we'll explore how to use the IntersectionObserver to animate elements on scroll.

To get started, we first need to create an instance of the IntersectionObserver. This is done by passing a callback function to the IntersectionObserver constructor. The callback function will be called each time an element is intersected.

        
    const observer = new IntersectionObserver(callback);
        
      

Once we have our observer instance, we can start observing elements by calling the observe method. This method takes an element as an argument, and it will start tracking the intersection of that element with the root element or viewport. To animate an element on scroll, we can use the callback function to add or remove a class that applies the desired animation. For example, let's say we have a fade-in class that applies a fade-in animation to an element. We can add this class to an element when it is intersected by the observer, and remove it when it is no longer intersected. Here's an example of how this might look:

        
    
    const fadeIn = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('fade-in');
        } else {
          entry.target.classList.remove('fade-in');
        }
      });
    };
    
    
    
    const observer = new IntersectionObserver(fadeIn);
    const elements = document.querySelectorAll('.in-view');
    
    elements.forEach((element) => {
      observer.observe(element);
    });
    
          
        
      

In this example, we create an instance of the IntersectionObserver and pass it a fadeIn callback function. The fadeIn function loops through each entry in the entries array, which is an array of objects representing the observed elements. For each entry, it checks if the element is intersecting, and adds or removes the fade-in class accordingly.

Next, we use querySelectorAll to select all elements with the in-view class. These are the elements that we want to animate on scroll. We loop through these elements and call the observe method on each one, passing the element as an argument. This will start tracking the intersection of each element with the root element or viewport, and calling the fadeIn callback function whenever the intersection changes. Now we just need to add our CSS classes for the fade-in animation. Here's an example of how this might look:

        
    
    .in-view {
      opacity: 0;
    }
    
    
    .fade-in {
      animation-duration: 0.5s;
      animation-fill-mode: both;
      animation-name: fadeInUp;
    }
    
    
    @keyframes fadeInUp {
      0%  {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
      }
      100% {
        opacity: 1;
        transform: none;
      }
    }
    
        
      

Lastly we just need to add the in-view class to the elements that we want to animate on scroll.

        
    
    <h2 class="in-view">
      With this simple example, we've seen how to use the IntersectionObserver to animate elements on scroll. This can be a useful technique for adding engaging and dynamic effects to a page, and it is a great alternative to using the scroll event, which can be less performant and more difficult to work with. Give it a try and see what creative animations you can create!
    </h2>
    
        
      

With this simple example, we've seen how to use the IntersectionObserver to animate elements on scroll. This can be a useful technique for adding engaging and dynamic effects to a page, and it is a great alternative to using the scroll event, which can be less performant and more difficult to work with. Give it a try and see what creative animations you can create! Feel free to reach out to me on Twitter @GmoMedel if you have any questions. For a live example please visit my Codepen