<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<style>
    .dm-gsap-cards {
        transition: opacity 0.2s !important;

    }

</style>

<script>

 window.addEventListener("load", () => {

const dmGsapCards = document.querySelectorAll('.dm-gsap-cards');
 const dmCardsLength = dmGsapCards.length;


 dmGsapCards.forEach((dmElement, index) => {

    const dmCardsOffset = -15 * (index + 1);
    const scaleValue = (100 - dmCardsLength) / 100 + ((index + 1) * 0.01); // Incremental scale value
    const opacityValue = (1 - dmGsapCards.length/10) + ((index + 1) * 0.1);


    gsap.to(dmElement, {
        scrollTrigger: {
            trigger: dmElement,
            endTrigger: '.dm-gsap-cards-end',
            start: `0%+=${dmCardsOffset}px 15%`,
            end: '0% 20%',
            pin: true,
            scrub: true,
            markers: false
        }
    });

    if (index < dmGsapCards.length - 1) {
        const nextElement = dmGsapCards[index + 1];
        gsap.to(dmElement, {
            scrollTrigger: {
                trigger: nextElement,
                start: '50% 50%',
                end: '50% 50%',
                markers: false,
                onEnter: () => {
                    gsap.to(dmElement, { opacity: opacityValue, scale: scaleValue, duration: 1.5, transformOrigin: 'top center'});
                },
                onLeaveBack: () => {
                    gsap.to(dmElement, { opacity: 1, scale: 1, duration: 1.5 });
                }
            }
        });
    }
});
});

</script>