1

I am trying to observe an element to apply animations on it. I have used intersection observer before but this time for some reason its not working. I am unable to find the issue. Below is my js code

useEffect(() => {


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

        entry.target.classList.toggle('show', entry.isIntersecting)
        if (entry.isIntersecting) observer.unobserve(entry.target)

      })

    })
     const boxElList1 = document.querySelectorAll('.Repos');
     boxElList1.forEach((el) => {
      observer.observe(el);

      })
}, [])

Here's the CSS that I'm trying to apply :

 .Repos{
    width: 90%;
    display: grid;
    grid-template-columns: repeat(2, 50vh);
    justify-content: space-evenly;
    transform: translateX(-100px);
    opacity: 0;
  }
 .Repos.show{
    opacity: 1;
    transform: translateX(0);
  }

Below is element that I'm trying to observe:

<div className='Repos'>
            {loading1 ? (
              <div className='loading'>
                <GridLoader color='#4169E1' loading={loading1} size={20} /></div>
            ) : (rep.map(e => {
              return (

                <Repo name={e.name} desc={e.description} lang={e.language} />

              );
            }))}
 </div>
  • Is it possible that you're initializing your observer before you have `.Repos` in the DOM? It's also possible that the `.Repos` element will get unmounted/remounted/re-rendered, and your observer won't be observing the new DOM elements. – ray Sep 20 '22 at 22:49
  • @rayhatfield yes I am getting .Repos from an API so it maybe possible –  Sep 20 '22 at 22:51
  • Is this `useEffect` in the same component as that `
    `. Please make it a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example).
     – Youssouf Oumar Sep 22 '22 at 06:14

0 Answers0