So, I’m having some trouble with my code. Everytime I refresh the website the code is working for me, but my co-worker has some slight visual bugs (parts of the site is not loading in, animations don’t work, button animation doesn’t work, etc.). I was wondering if this is a caching problem or maybe my bad code.

The JavaScript is properly enqueued and (obviously) on my part everything is working. My guess is that it’s the god awful theme that is Avada or caching. We use WP Rocket for caching, my code uses the GSAP library.

Enqueued scripts:

function add_js_scripts() {
    wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js', array(), false, true);
    wp_enqueue_script( 'scrolltrigger-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js', array(), false, true);
    wp_enqueue_script( 'gsap-plugin-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js', array(), false, true);   
    wp_enqueue_script('animatie-js', get_stylesheet_directory_uri() . '/animatie.js', array(), '1.0.0', true);
    wp_enqueue_script('form-js', get_stylesheet_directory_uri() . '/form.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'add_js_scripts'); 

Animation code (buttons and scroll animation):

// Selecting buttons
const mouseTarget = document.querySelectorAll('.button-xlarge, .button-large');

// Looping through the buttons
mouseTarget.forEach(target => {
    // Default background
    target.style.background = '-webkit-gradient(radial, 0 0, 0, 0 0, 200, from(#F4982A), to(#EA6139)), #ec663b';
    // EventListener for hover animation (mouse follow) 
    target.addEventListener('mousemove', (e) => {
        // Get the mouse positions of element
        let rect = e.target.getBoundingClientRect();
        let x = Math.round(e.clientX - rect.left);
        let y = Math.round(e.clientY - rect.top);
        // Hover background
        let radialBg = `-webkit-gradient(radial, ${x} ${y}, 0, ${x} ${y}, 200, from(#F4982A), to(#EA6139)), #ec663b`;
        // GSAP hover animation
        gsap.to(target, 0.5, {background: radialBg, ease: Power4.ease});
    })
});


// Selecting sections for scroll animation
const sections = gsap.utils.toArray('.animated');
const animation = gsap.utils.toArray(document.querySelectorAll('.animated .fusion-column-wrapper'));

// Registering ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);

// Set styling on page load
gsap.set(animation, {opacity: 0, y: 50});

// Refreshing ScrollTrigger plugin
window.onload = function() {
    ScrollTrigger.refresh(true);
}

// The scroll animation
sections.forEach(section => {
    gsap.to(section.querySelectorAll('.fusion-column-wrapper'), {
        scrollTrigger: {
            trigger: section,
            start: 'top 70%',
//          markers: true,
        },
        autoAlpha: 1,
        y: 0,
        duration: 0.5,
        stagger: 0.2,
        ease: 'Power4.easeOut',
    })
})

Staging URL:
https://floral.burobreinbouwt.nl/

Any help would be greatly appreciated!
Thanks in advance.