Баги в анимации css

Можете помочь исправить баг, при плавном прокрутке скролла все работает хорошо, но при резком прокрутке анимация сломается

Исходники на файлы тут - https://github.com/diasgalymbek47/Test.git. Код анимации начиная с 398кода, еще написал небольшой скрипт в main.js там тоже можете посмотреть. HTML код с 129кода.

Игрался с временем проигрывания анимации не помогло.

Если не хотите скачать код, вот сам код -->

HTML

<div class="projects__effect">
     <div class="effect__item1 effect__item"></div>
     <div class="effect__item2 effect__item"></div>
     <div class="effect__item3 effect__item"></div>
     <div class="effect__item4 effect__item"></div>
     <div class="effect__item5 effect__item"></div>
     <div class="effect__item6 effect__item"></div>
</div>

SCSS

 &__effect {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        &.disable {
            z-index: -1;
        }
    }
.effect {
    &__item1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #242424;
        z-index: 3;

        &.anim {
            animation: effect 0.4s linear 0.1s forwards;
        }
    }

    &__item2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #2d2d2d;
        z-index: 2;

        &.anim {
            animation: effect 0.4s linear 0.25s forwards;
        }
    }

    &__item3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #414141;
        z-index: 1;

        &.anim {
            animation: effect 0.4s linear 0.35s forwards;
        }
    }

    &__item4 {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background-color: #242424;
        z-index: 3;

        &.anim {
            animation: effect 0.4s linear 0.1s forwards;
        }
    }

    &__item5 {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background-color: #2d2d2d;
        z-index: 2;

        &.anim {
            animation: effect 0.4s linear 0.25s forwards;
        }
    }

    &__item6 {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background-color: #414141;
        z-index: 1;

        &.anim {
            animation: effect 0.4s linear 0.35s forwards;
        }
    }
}

@keyframes effect {
    0% {
        width: 50%;
    }

    100% {
        width: 0;
    }
}

JS

const effectItem = document.querySelectorAll('.effect__item');
const effect = document.querySelector('.projects__effect');

window.addEventListener('scroll', () => {
    if (window.pageYOffset >= 600) {
        effectItem.forEach(el => {
            el.classList.add('anim');
        })
    } else {
        effectItem.forEach(el => {
            el.classList.remove('anim');
        })
    }

    if (window.pageYOffset >= 1000) {
        setTimeout(() => {
            effect.classList.add('disable');
        }, 700);
    } else {
        effect.classList.remove('disable');
    }
})