is there an entry.target.Classname in intersection observer?

Question

I am trying to conditionally trigger animations via intersection observer. I have used document.queryselector.all to call items of a certain class, and then another document.queryselector.all to call items of a different class.

I have two different animations being triggered via intersection observer, but I want them to be triggered conditionally based on their classname. is there a way to do this?

const Images  = document.querySelectorAll ('.anim',); 
const lines = document.querySelectorAll ('.lines');

let callback = (entries, observer)=> {

    entries.forEach(entry => {
        if(entry.target.className === '.anim' && entry.intersectionRatio > 0){
            console.log (entries);

            entry.target.style.animation = `pcb_grp_anim 1s ${entry.target.dataset.delay} forwards ease-in-out`

        }

        else {
            entry.target.style.animation = 'none';
        }
        
    })

}

let observer = new IntersectionObserver (callback);


Images.forEach (image => {
    observer.observe(image);
    })

I want to trigger the animation for class .anim based on class name condition being met? Is there such a way?

I am a total beginner BTW. Thanks

score 0 · Answer 1 · answered Jun 26 '20 at 08:43

0

You could try this instead :

if(entry.target.classList.contains('anim') && entry.intersectionRatio > 0)

answered Jun 26 '20 at 08:43

spaceSentinel

630
6
9

is there an entry.target.Classname in intersection observer?

1 Answers1