El script funciona y agrega la clase "completa".

 window.addEventListener("scroll", function() { var scrollFadeClass = document.querySelectorAll(".scrollfade"); scrollFadeClass.forEach((scrollfade) => { var offsetTop = window.scrollY + scrollfade.getBoundingClientRect().top; var scrollTop = window.scrollY; if (scrollTop + (window.innerHeight / 2.5) > scrollfade.offsetTop) { scrollfade.classList.add("complete"); }; }); });

El problema radica aquí, cuando scrollfade está en la segunda sección de div, sigue la condición if creada

 <div class="row no-gutters"> <div class="slider scrollfade from-bottom"> <div class="col-12 slider-container"> <p>some text / image here</p> </div> </div> </div>

Este no sigue la condición if si el scrollfade está dentro del 3er div, cuando lo muevo al 2nd div, de repente sigue la condición if

 <div class="row no-gutters"> <div class="slider"> <div class="col-12 slider-container scrollfade from-bottom"> <p>some text / image here</p> </div> </div> </div>``` Can you please point out where the mistakes are? Thanks