Kevin Powell - Community•13mo ago

IntersectionObserver Question

Hello, I'm trying to use IntersectionObserver for two different instances. First, to detect when a section is within view, then count from 0 to 500. Then, to detect if any img is in view, and to animate them appearing. Current Snippet:

const counter = document.querySelector('.value');

const imgs = document.querySelectorAll('img'); // Get images

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            countReviews()
            console.log(entry)
        };
    });
});

observer.observe(counter);

observer.observe(imgs); // Call Observer for images

const counter = document.querySelector('.value');

const imgs = document.querySelectorAll('img'); // Get images

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            countReviews()
            console.log(entry)
        };
    });
});

observer.observe(counter);

observer.observe(imgs); // Call Observer for images

This code works for counting, but I'm unsure how to incorporate a second observer. Do I need to check when theres an observation and determine if it's the counter or image by the observation target, then call each function accordingly? (didn't include the lazy load function) Any help is appreciated, thanks

9 Replies

glutonium•13mo ago

well suppose your img appearance animation would be the opacity going from 0 to 1 now u can ofc initially set the opacity to 0 then make a separate class with higher specificity than the one where u set opacity is 0, and for that class u set the opacity to 1 now i guess in the callback u can basically check if imgs includes entry.target (imgs.includes(entry.target) // returns bool) , and then if its true then u can set that class with opacity of 1 to that entry.target

MattOP•12mo ago

How would I observe multiple elements with the observer? Like this?

imgs.forEach(img => {
    observer.observe(img);
})

observer.observe(counter);

imgs.forEach(img => {
    observer.observe(img);
})

observer.observe(counter);

imgs.includes(entry.target) also returns .includes() is not a function

clevermissfox•12mo ago

Maybe this will help I just watched this am https://youtu.be/9W7rKLahq2Q?si=o41MxEx3NOcLuGaO

pmCodingTutorials

YouTube

How to code a Javascript Intersection Observer that makes text appe...

This week, I'm going to show you how to use the JavaScript Intersection Observer to make text smoothly appear on the page as the user scrolls down. The complete code is also available through my GitHub for you: https://github.com/patriciamolnar/intersection-observer-text-appear-on-scroll OR View completed project on my CodePen: https://cod...

glutonium•12mo ago

u have to convert it into an array first what u have is a nodelist u have to do let imgArr = Array.from(imgs) and then do imgArr.includes()

MattOP•12mo ago

Ah okay, I noticed it was a nodelist in the console when I logged How would I run multiple observers?

glutonium•12mo ago

with forEach ig

MattOP•12mo ago

I'm doing something like this and it doesn't seem to work properly

const counter = document.querySelector('.value');
const imgs = document.querySelectorAll('img');
let imgArr = Array.from(imgs)

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {

        if(imgArr.includes(entry.target)) {

            setTimeout(entry.target.classList.add("fade-in"), 3000);

        } else if (entry.target == counter) {
            countReviews()
        }
    });
});

imgs.forEach(img => {
    observer.observe(img);

})

observer.observe(counter);

const counter = document.querySelector('.value');
const imgs = document.querySelectorAll('img');
let imgArr = Array.from(imgs)

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {

        if(imgArr.includes(entry.target)) {

            setTimeout(entry.target.classList.add("fade-in"), 3000);

        } else if (entry.target == counter) {
            countReviews()
        }
    });
});

imgs.forEach(img => {
    observer.observe(img);

})

observer.observe(counter);

When I run this code, it detects the counter even though it's not within range of the observer

MattOP•12mo ago

https://gyazo.com/902d9430b0e3740103b972b1a1f7f1bf

Gyazo

Gyazo Screen Video

MattOP•12mo ago

The counter is the red section and the image detection seems to be adding the class to every image despite not being within range

Gaming

Programming

IntersectionObserver Question