Beginner's Guide to Scroll Animations with IntersectionObserver API

Are you looking to add some flair to your website with scroll animations? Look no further! In this beginner-friendly guide, we'll explore how to use the IntersectionObserver API to create smooth animations when scrolling. We'll walk through a simple example that you can easily adapt to your own projects.

What We're Building

A demonstration of the scroll animation we'll be creating

What is the IntersectionObserver API?

The IntersectionObserver API is a powerful tool that allows you to detect when an element enters or leaves the viewport (the visible area of a web page). This makes it perfect for triggering animations as users scroll through your content.

Let's dive into the code!

HTML Structure:

First, let's set up our HTML structure:

<div class="container">
  <div class="column">Content 1</div>
  <div class="column">Content 2</div>
  <div class="column">Content 3</div>
  <div class="column targetFour">Content 4</div>
  <div class="column targetFive">Content 5</div>
</div>
  

We have a container with five columns. The last two columns have special classes (targetFour and targetFive) that we'll use to apply our animations.

CSS Styling:

Now, let's add some CSS to style our columns and set up the animation:

.container {
  width: 80%;
}

.column {
  flex-direction: row;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  background-color: antiquewhite;
  height: 200px;
}

.targetFive, .targetFour {
  visibility: hidden;
  transition: all;
  transition-duration: 1s;
  opacity: 0;
}

.entryAnim {
  transition: all;
  transition-duration: 0.5s;
  visibility: visible;
  transform: translateX(100px);
  opacity: 1;
}
  

Here's what our CSS does:

1. We set a width for the container and style the columns.
2. The targetFive and targetFour classes hide the elements initially.
3. The entryAnim class defines the animation that will be applied when the elements come into view.

JavaScript Magic:

Now for the exciting part – let's implement the IntersectionObserver:

function callback(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("entryAnim");
    } else {
      entry.target.classList.remove("entryAnim");
    }
  });
}

let observer = new IntersectionObserver(callback, {
  root: null,
  rootMargin: "0px",
  threshold: 1.0,
});

const target = document.querySelector(".targetFive");
const targetTwo = document.querySelector(".targetFour");

observer.observe(target);
observer.observe(targetTwo);
  

Let's break down what's happening here:

1. We define a callback function that adds or removes the entryAnim class based on whether the element is intersecting (visible) or not.
2. We create a new IntersectionObserver with our callback and some options:
   • root: null means we're using the viewport as the root.
   • rootMargin: "0px" doesn't add any margin around the root.
   • threshold: 1.0 means the callback will be triggered when 100% of the target is visible.
3. We select our target elements using querySelector.
4. Finally, we tell our observer to watch these target elements.

How it works:

When you scroll down the page, the IntersectionObserver will detect when the fourth and fifth columns become fully visible. When this happens, it adds the entryAnim class, which triggers our animation. The elements will slide in from the left and fade into view.

If you scroll back up, the animation will reverse, hiding the elements again.

Conclusion

Congratulations! You've just implemented a cool scroll animation using the IntersectionObserver API. This is just the beginning – you can customize the animations, change the threshold, or apply different effects to create more complex and engaging scroll experiences.

Remember, the key to mastering web development is practice and experimentation. Try modifying this code to create your own unique animations!

Happy coding! 🎉