website hosted with firebase didnt load AOS properly

Question

i have a small problem. So i have hosted my website with firebase hosting and I install AOS using NPM. On some browser it works (for example on pc it works with Chrome but now with Microsoft Edge) On my iphone, first it was working on safari and then on Chrome, but now isn't working anymore (even if i didn't changed anything.)

The AOS didn't load sometimes.

When is it working is it like this:

When is not working it looks like this:

This is the code of the section that didn't load, here i imported the AOS (which i install with NPM). However sometimes it loads, sometimes not. Which is the problem? Firebase cannot share the resources with all users or?

import AOS from "aos";
import "aos/dist/aos.css";

export default function Despre() {
    window.addEventListener('load', () => {
        AOS.init({
            duration: 1000,
            easing: 'ease-in-out',
            once: true,
            mirror: false
        })
    });
    return (
        <section id="about" class="about">
        <div class="container">

            <div class="section-title" data-aos="zoom-out">
                <h2>Despre noi</h2>
                <p>Cine suntem?</p>
            </div>

            <div class="row content" data-aos="fade-up">
                <div class="col-lg-6">
                    <p>
                        Localizați în localitatea Galați, dorim să vă oferim o nuntă ca în povesți, atât mirilor cât și invitaților acestora.
                    </p>
                    <ul>
                    <li><i class="ri-check-double-line"></i> Porumbeii pe care îi oferim sunt de culoare alb imaculat, fiind foarte curați.</li>
                        <li><i class="ri-check-double-line"></i> Porumbeii au fost folosiți ca simboluri de secole, având o simbolistică vastă!</li>
                        <li><i class="ri-check-double-line"></i> Aceștia simbolizează, printre altele, pacea, liniștea și iubirea!</li>
                    </ul>
                </div>
                <div class="col-lg-6 pt-4 pt-lg-0">
                    <p>
                        Momentul artistic al eliberării porumbeilor poate fi la ieșirea mirilor din biserică, la ieșirea de la Oficiul Stării Civile sau înainte de intrarea în localul în care va avea loc evenimentul. Momentul eliberării porumbeilor va fi ales de dumneavoastră!
                    </p>
                    <div class="d-flex justify-content-center">
                        <i class="fa-solid fa-dove fa-4x" id="porumbel"></i>
                    </div>
                </div>
            </div>

        </div>
    </section>
    );
}

Thanks for your help!!

Answer 1

I encountered the same problem. In safari animation did not work. I downloaded the script (link) using the console from the official AOS demo site and added the same initialization to the footer of the site.