The script works and it adds the class "complete".

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");
            };
        });
});

The problem lies here, When scrollfade is in the 2nd section of div, it follows the if condition created

<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>

This one doesnt follow the if condition if the scrollfade is inside the 3rd div, when i move it to the 2nd div, it suddenly follows the if condition

<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