In Simple terms- Intersection Observer: Scroll trigger

For anyone who loves interaction on the web, Intersection Observer is a concept you’ll come across either now or later so why not now?

Let's look at the regimented definition straight from mozilla.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

For me, that’s not really saying much. This is how I look at things, Intersection Observer is like a watchdog that you have to give certain information to in order for it to watch it. For example, You have to give it the name(element) you want it to watch, you have to let it know when you want it to watch it as well what to do when it starts observing it.

Now since we aren’t actually spying on actual humans, what are we talking about here? Well, all of this is in relation to the viewport and the interactions that occur when we scroll and elements meet each other. Well, why is that important? It’s important because it allows us to take certain actions on them when they interact. Ok, enough theory let's practice. Below is what that concept allowed me to do.

To get started, I make sure to select all my sections

const sections = document.querySelectorAll("section")

Next, I will create a new Intersection Observer and it will take in 2 arguments. The first being a callback function and the second will be a threshold. I will explain the second one in a minute. We see entries have been passed in but we haven’t connected it to our section written above. We want the observer to observe or lookout for every section coming in to view. So how do we connect this?

const isViewed = new IntersectionObserver(entries => {
},{})

Since I have a couple of sections it means that it’s a list. We need to go over each individual section and connect it with the IntersectionObserver

sections.foEach(section => {
//here is where I pass the section to the observer
 observer.observe(section)
})

Ok, now back to isViewed

const isViewed = new IntersectionObserver(entries => {
   entries.forEach(entry => {
      if(entry.intersectionRatio > 0.1) {
         entry.target.classList.add("you-see-me")
       } else {
         entry.target.classList.remove("you-see-me")

   }   
})
},{  
    threshold: [0.0, 0.1, 1.0]
})
//entries describes an intersection change, so when a section comes to view we want to do something to it.
//since we have multiple things coming in we also have to loop over it
//entry has multiple things we can pull out like intersectionratio
//The callback function runs whenever thresold values are met(numbers correspond to 0%,10%,100%

Additional changes added to css to make this whole look work

section {
height: 100vh;
position: sticky;
top: 0;
padding: 120px;
display:flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(120deg,#97ebd6,#9aa6f9)
}
@keyframes show {
0% {
opacity: 0;
transform: translate(0,24px) scale(0.34);
}
50% {
opacity: 1;
transform: translate(0,0) scale(2);
}
100% {
opacity: 1;
transform: translate(0,0) scale(1);
}
}
section img {
max-height: 100%;
}
section.alternate {
background-image: linear-gradient(30deg, #dc72ef, #fe0000, #eca6a6)
}
section.in-view img{
animation: show 0.4s 0.4s  both;
}

That’s it!!!!