How IntersectionObserver works
Tags: beginners, javascript, tutorial, webdev
Published: 2022-10-18 01:06:29

## Introduction

`IntersectionObserver` is a Javascript API and is one of the three observer API’s. In web development it’s used to add scroll animations or infinite scrolling like on the [github copilot page](https://github.com/features/copilot) or on [this webpage i made](https://birthday1.lensco825.repl.co/). So here we’ll learn how it works and how to use it. I made this explanation based on what i learned last week, but go to the bottom to see where you can be explained more! I made this as informative as possible so i hope you like it.



## How to make it

To make it you first need to make a `const` variable (usually called observer) that has `new IntersectionObserver()`and inside it’s constructor (which are the parentheses after it) you add either an arrow function or a normal function where you put what happends when something intersects the viewpoint. That something is re-typed as the `entries` parameter, the only argument any function inside the constructor accepts. So then how do you observe something? You have to use the `observe()` method and in it call an element or a variable with an element that you want to observe. Inside the function if you want to observe multiple elements then you use the `forEach()` to target each entry that’s observed.

```javascript
//arrow function version (you'll see it be used the most)
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {//where you put the wanted action for when it's observed});
});

observer.observe(//element you want to observe);
```

```javascript
//normal function version
const observer = 
new IntersectionObserver(function(entries, observer) {});

observer.observe(//element you want to observe);
```

**Tip**: If you want more details about what you’re observing give the function in the `IntersectionObserver` `console.log(entries)` then go to your console console where you’ll find information about how it’s being observed.


## How to Use it

This may seem useless for some people, but with this API you can be creative with your webpage and how it works. For example, on the code from the [webpage i made](https://birthday1.lensco825.repl.co/) you can see that i gave each element a _hidden_ class that makes them invisile and far off the webpage but i made a _show_ class had the opisite of what it had. I used _IntersectionObsever_ so when any element with the hidden class intersects the viewpoint it gets the show class which makes a cool transition. This is just one of the many ways you can combine this with CSS to make cool transitions. You could also make some for color, shape, size, and more! **(Make shure to click the HTML, CSS, and Javascript buttons to see how it works. Especially the javascript!)**




##Result
scroll down to see the scroll animations!
{% codepen https://codepen.io/lensco825/pen/gOzqowN %}



##Threshold

The `Threshold` property is used put how much of an element intersects to trigger the observer action. It's value is between 0 and 1 which is the same as 0%-100%. It's default value is 0 wich means as soon as a single pixel of an observed element intersects an action made in the constructor will happen. 1 on the other hand means if the element is fully intersecting with the viewpoint then an action will happen. 

Say that you were editing my javascript codepen by adding a `threshold` property to it (you can do it right now by clicking edit on codepen that on the codepen embed). Inside the `IntersectionObserver` function you add a threshold that has the value of `0.5`. This means that the elements it's observing will be affected if half of it is intersecting.


To add it to the observer API you have to put it as the last parameter in the constructor. **Don't be fooled by seeing how long your functions are! Everything is in the observer constructor including the functions so after you make the functon you simply add it after.** If it's still confusing for you here's an example.

Here it is without any content in the arrow function, as you can see the threshold is simply just a parameter
```javascript
const hiddenElements = document.querySelectorAll(".hidden");

const observer = 
new IntersectionObserver((entries) => {}, {threshold: 1 });

hiddenElements.forEach((el) => observer.observe(el));
```
Now here it is with the content, the `threshold` is still the last parameter even though the content in the arrow function makes it seems totally diffent. This might cause you to put you threshold in the wrong place
```javascript
const hiddenElements = document.querySelectorAll(".hidden");

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
    console.log(entry);
     if (entry.isIntersecting) {
        entry.target.classList.add('show');
     }
     else  {
        entry.target.classList.remove('show');
     }
    });
}, {threshold: 1 });

hiddenElements.forEach((el) => observer.observe(el));
```
**(put a threshold on my codepen and notice how the images take longer scrolling to see, for some reason you might not see the text which is a bug i'll fix later)**



## Root Margin


The `rootMargin` option property is similar to the CSS margin except it changes the size of the viewport. You can put up to 4 values but unlike the CSS margin you have to put a `px` on even the value of 0. It also has to be a string unlike the `threshold` property. If you want to make it bigger than the normal size you have to use positive values while if you want to make it smaller than the normal size you use a negative value.

```javascript
const observer = 
new IntersectionObserver((entries) => {}, {rootMargin: 1 });
```


## Root
The `root` property is used to set the boundry of the viewpoint as the size of an element. It has to be one of the elements that is being observed. It can be useful for stuff like scroll containers.

```javascript
const observer = 
new IntersectionObserver((entries) => {}, {root: document.body });
```


## Unobserve

The `unobserve()` method is used to stop the `IntersectionObserver` from observing an element when it's already been observed. For lazy loading images this can stop many issues and bug's. If we used this on my codepen after the the scroll animation happened once it would never happen again (unless the `else` conditional is still there).

```javascript

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
    console.log(entry);
     if (entry.isIntersecting) {
        entry.target.classList.add('show');
        observer.unobserve(entry.target.classList);
     }
     else  {
        entry.target.classList.remove('show');
     }
    });
}, {threshold: 1 });
```


## Disconnect

The `disconnect()` method is similar to `unobserve` except it causes all the targeted and selected elements to be unobserved. You simply type `disconnect()`.


## To Learn More About This: 

**videos:**
 {% youtube https://www.youtube.com/watch?v=T8EYosX4NOo&t=768s %}
{% youtube https://www.youtube.com/watch?v=2IbRtjez6ag %}
{% youtube https://www.youtube.com/watch?v=T33NN_pPeNI %}


**Websites:**
[IntersectionObserver on mozilla](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)
[An Explanation of How the Intersection Observer Watches](https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/)



## Try It Yourself!

To know how to code something you also need to know how to make it yourself from experiance. So how about you make a nice project. My suggestion is to make an infinite scroll website or some scroll animations like the one i made. If you don't have any ideas here's one to make.

- Make a webpage that's `4000px` long
- When at the bottom a div box with the text "Boo!" appears
- (The transition from it going from invisible to visible should be 4 seconds)
- Hint: use `IntersectionObserver` by putting conditionals that add and and remove a classlist. It should be a classlist that makes