این کد جاوا اسکریپت من
function getBootstrapColumnCount() {
    const width = window.innerWidth;

    if (width >= 992) {      // lg breakpoint and up
        return 4;
    } else if (width >= 768) {  // md breakpoint and up
        return 3;
    } else if (width >= 576) {  // sm breakpoint and up
        return 2;
    } else {
        return 1;  // xs
    }
}

const itemElement = document.getElementById("item-add");

let loadCount = 0; // شمارنده برای دفعات بارگذاری

// تابع برای افزودن کارت‌های اسکلتون
function addSkeletonCards() {
    const colCount = getBootstrapColumnCount();
    const cardsToAdd = colCount * 4;  // تعداد کارت اضافه شده در هر بار

    for (let i = 1; i <= cardsToAdd; i++) {
        const cardId = `skeleton-id-${loadCount * cardsToAdd + i}`;
        itemElement.insertAdjacentHTML('beforeend', `
            <div class="col" id="${cardId}">
                <div class="skeleton-card">
                    <div class="skeleton-image"></div>
                    <div class="skeleton-title"></div>
                    <div class="skeleton-text"></div>
                    <div class="skeleton-text"></div>
                    <div class="skeleton-button"></div>
                </div>
            </div>
        `);
    }

    loadCount++;
}

// ابتدا کارت‌های اولیه اضافه شوند
addSkeletonCards();

// وقتی داخل #item-add اسکرول انجام می‌شود
itemElement.addEventListener('scroll', () => {
    // جایی که کاربر تا الان اسکرول کرده
    const scrollTop = itemElement.scrollTop;

    // کل ارتفاع محتوا
    const scrollHeight = itemElement.scrollHeight;

    // ارتفاع قابل مشاهده (نمایش داده شده)
    const clientHeight = itemElement.clientHeight;

    // بررسی رسیدن به انتهای اسکرول (داخل 50px)
    if (scrollTop + clientHeight >= scrollHeight - 20) {
        // کارت‌های جدید اضافه شود
        addSkeletonCards();
    }
});
میخوام هم همش توی یه تابع قرار بگیره تا در صورت نیاز فراخوانی بشه
همش یه ایونت اسکرول براش تعبیه بشه طبق این کد های html که میفرستم
<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اسکلتون کارت ریسپانسیو با تصویر</title>
    <!-- بوتسترپ CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- استایل سفارشی -->
    <link href="index.css" rel="stylesheet">
</head>

<body>

    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reserved-data-detail">باز کردن مدال</button>
    
    <div class="modal fade" id="reserved-data-detail" tabindex="-1" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-medical-data">
            <div class="modal-content p-12 p-md-12">
                <div class="modal-body">
                    <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"
                        id="btn-close"></button>
                    <div class="text-center mb-4 custom-background">
                        <h3 class="mb-2">جزئیات ویزیت</h3>
                    </div>
                    <div class="container my-5">
                        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="item-add"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- بوتسترپ JS (اختیاری) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="index.js"></script>
</body>

</html>
هم براشون انیمیشن بزار از این کد هایی که برات میفرستم
function ShowItem(element, elementName = false){

    if (elementName){
        element = document.getElementById(element);
    }

    element.classList.remove('d-none');
    element.style.display = 'block';

}
function HideItem(element, elementName = false){

    if (elementName){
        element = document.getElementById(element);
    }

    element.classList.add('d-none');
    element.style.display = 'none';
}


function ShowItemWithAnimation(element) {
    const ItemField = document.getElementById(element);

    ShowItem(ItemField);

    gsap.fromTo(ItemField, {
        opacity: 0,
        y: 20
    }, {
        opacity: 1,
        y: 0,
        duration: 0.5,
        ease: "power2.out",
        stagger: 0.15
    });
}
function HideItemWithAnimation(element) {
    const ItemField = document.getElementById(element);

    gsap.to(ItemField, {
        opacity: 0,
        y: -20,
        height: 0,
        marginTop: 0,
        padding: 0,
        duration: 0.5,
        ease: "power2.in",
        onComplete: () => {
            HideItem(ItemField);
            gsap.set(ItemField, {
                clearProps: "all"
            });
        }
    });
}
هم میخوام بعد یه عملیاتی کارت های اسکلتون به کارت های دیتای اصلی تبدیل و جایگزاری بشن که ترجیحم اینه واسه اونا هم یه انیمیشن تعبیه کنی
ممنونم