[Gsap scroll trigger not always firing on scroll or reload]

gsap.registerPlugin(ScrollTrigger);

   ScrollTrigger.config({ limitCallbacks: true });

   const whyItems = gsap.utils.toArray('.why_list_item');
    whyItems.forEach(whyItem => {
    gsap.from(whyItem, { 
        y: 80,
        duration: 0.5,
        delay: 0.5,
        opacity: 0,
        scrollTrigger: {
        trigger: whyItem, 
        }
    })
    });

    const upAnis = gsap.utils.toArray('.up_ani');
        upAnis.forEach(upAni => {
        gsap.from(upAni, { 
            y: 80,
            opacity: 0,
            duration: 1.0,
            scrollTrigger: {
                trigger: upAni,
                
            }
        })
    });

    const wipes = gsap.utils.toArray('.wipe ');
        wipes.forEach(wipe => {
        const timeWipe = gsap.timeline({
            scrollTrigger: {
                trigger: wipe,
                
            }
        });
        timeWipe.to($(wipe).find('.wipe_overlay'), { 
            width: "100%",
            duration: 0.8,
            ease: Power2.easeInOut,
            transformOrigin: "left",
            
        })
        timeWipe.to($(wipe).find('.wipe_img'), { 
            autoAlpha: 1, 
            duration: 0,
            delay: -0.1,

        })
        timeWipe.to($(wipe).find('.wipe_overlay'), { 
            width: "0%",
            duration: 0.8,
            transformOrigin: "right",
            ease: Power1.easeInOut,
            right: "0",
            
        })

    });

Hi Everyone,

My code isn't always firing completly, sometimes there is a big delay or it doesn't finish all the animations.
Please view my website and refresh and scroll a couple of times to generate the problem. www.1314media.nl

Hope someone can help me!

Thanks in advance.

Cas Bukkems