Utilicé el observador de intersección para desvanecerse en algunos divs cuando están visibles al agregar una clase, por alguna razón solo lo agrega al primero, en el escritorio todos estos divs están en la ventana gráfica, por lo que si el primero es visible, también lo son los otros. , sin embargo, cuando me desplazo fuera de esa sección que tiene los divs y luego me desplazo hacia atrás, agrega la clase al siguiente div y así sucesivamente, mi pregunta es por qué no agrega la clase a todos los divs al mismo tiempo desde son visibles de inmediato.

 const items = document.querySelectorAll(".item"); const newoptions = { root: null, threshold: 0.3, }; const fadeWork = function (entries, observer) { const [entry] = entries; if (!entry.isIntersecting) return; entry.target.classList.add("items-active"); }; const newObserver = new IntersectionObserver(fadeWork, newoptions); items.forEach((curr) => newObserver.observe(curr));

 <div class="items"> <div class="item"> <a target="_blank" href="https://sixteenclothingsite.netlify.app/" ><img src="assets/images/clothing-site.png" alt="" /></a> </div> <div class="item"> <a target="_blank" href="https://drinosi.github.io/" ><img src="assets/images/portfolio-site.png" alt="" /></a> </div> <div class="item"> <a target="_blank" href="https://drinos.helpjuice.com/" ><img src="assets/images/help-center.png" alt="" /></a> </div> <div class="item"> <a target="_blank" href="https://wfskills.com/" ><img src="assets/images/contractor-site.png" alt="" /></a> </div> <div class="item"> <a target="_blank" href="" ><img src="assets/images/bankist.png" alt="" /></a> </div> </div>

 .item { transition: 1s; transform: translateY(10%); opacity: 0; } .items-active { transform: translate(0); opacity: 1; }