Script not executing correctly on First page load, refreshing the page solves it?

Question

my gallery images stack up on the first visit but display fine after a page reload. Any idea what’s causing this? (live preview: https://seckinahsapdekorasyon.com/galeri)

    <!-- Gallery Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-4 portfolio-container">
                <?php
                $directory = 'img/galeri';

                // Get all files in the directory
                $files = scandir($directory);

                // Filter out non-image files
                $imageFiles = array_filter($files, function ($file) {
                    $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
                    $extension = pathinfo($file, PATHINFO_EXTENSION);
                    return in_array(strtolower($extension), $allowedExtensions);
                });

                // Echo all the images from a directory
                foreach ($imageFiles as $image) {
                    echo '
                    <div class="col-lg-4 col-md-6 portfolio-item wow fadeInUp">
                        <div class="rounded overflow-hidden">
                            <div class="position-relative overflow-hidden">
                                <img class="img-fluid w-100" src="' . $directory . '/' . $image . '" alt="' . pathinfo($image, PATHINFO_FILENAME) . '">
                                <div class="portfolio-overlay">
                                    <a class="btn btn-square btn-outline-light mx-1" href="' . $directory . '/' . $image . '" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
                                    <a class="btn btn-square btn-outline-light mx-1" href="javascript:void(0);" onclick="copyToClipboard(\'https://seckinahsapdekorasyon.com/' . $directory . '/' . $image . '\')"><i class="fa fa-link"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    ';
                }
                ?>
            </div>
        </div>
    </div>
    <!-- Gallery End -->