I have some functions

function growSeparator() {
    $('.applications-worth-module__separator').addClass('applications-worth-module__separator--active');
}
function reachPkt1() {
    $('.point-1-separator').addClass('point-separator--pkt1_active');
}
function reachPkt2() {
    $('.point-2-separator').addClass('point-separator--pkt2_active');
}
function reachPkt3() {
    $('.point-3-separator').addClass('point-separator--pkt3_active');
}
function reachPkt4() {
    $('.point-4-separator').addClass('point-separator--pkt4_active');
}

Every one of them adds css class with keyframes animation inside. I try to execute a function when element reaches middle screen. I'm using getBoundingClientRect to do it.

var pkt1 = document.querySelector(".point-1__container");
var pkt2 = document.querySelector(".point-2__container");
var pkt3 = document.querySelector(".point-3__container");
var pkt4 = document.querySelector(".point-4__container");

window.addEventListener('scroll', (e) => {
   if (pkt1.getBoundingClientRect().top < window.innerHeight/2) {
        growSeparator();
   }
   if (pkt1.getBoundingClientRect().top < (window.innerHeight/2)) {
        reachPkt1(); 
   }
   if (pkt2.getBoundingClientRect().top < (window.innerHeight/2)) {
        reachPkt2();
   }
   if (pkt3.getBoundingClientRect().top < (window.innerHeight/2)) {
        reachPkt3();
   }
   if (pkt4.getBoundingClientRect().top < (window.innerHeight/2)) {
        reachPkt4();
   }
})

The problem is - when I scroll to the last element, every function fires at the same time, not one by one. I tried to use "animationend" and "transitionend" event, but it works only for one element and for other four - not.

How can I achieve this effect, when I scroll to the last element (.point-4__container) all of my previous functions execute one after another?

Thanks.