GSAP 3D Stacking Containers – Elementor ( No Plugins )

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
    gsap.registerPlugin(ScrollTrigger);

    document.addEventListener("DOMContentLoaded", function () {
        
        const lastCard = document.querySelector(".last-pinned");
        const pinnedSections = gsap.utils.toArray(".pinned");

        let commonEndDistance;

        pinnedSections.forEach((section, index, sections) => {
            let effect = section.querySelector(".myeffect");

            let nextSection = sections[index + 1] || lastCard;
            let endScalePoint = `top+=${nextSection.offsetTop - section.offsetTop} top`;

            // Set commonEndDistance based on the first section
            if (index === 0) {
                commonEndDistance = `${nextSection.offsetTop - section.offsetTop}px top`;
            }

            gsap.to(section, {
                scrollTrigger: {
                    trigger: section,
                    start: "top top",
                    end: commonEndDistance,
                    pin: true,
                    pinSpacing: false,
                    scrub: true,
                },
            });

            gsap.fromTo(
                effect,
                { scale: 1, opacity: 1, y: 0 },
                {
                    scale: 0.3,
                    opacity: 0,
                    y: 400,
                    ease: "power1.inOut",
                    scrollTrigger: {
                        trigger: section,
                        start: "top top",
                        end: endScalePoint,
                        scrub: true,
                    },
                }
            );
        });

        // Apply the same end point to the lastCard as the others
        if (lastCard) {
            let effect = lastCard.querySelector(".myeffect");

            gsap.to(lastCard, {
                scrollTrigger: {
                    trigger: lastCard,
                    start: "top top",
                    end: commonEndDistance, // Same end point as other sections
                    pin: true,
                    pinSpacing: false,
                    scrub: true,
                },
                onStart: () => {
                    // Ensure lastCard has a lower z-index than the following content
                    lastCard.style.zIndex = '0'; // Set to lower than following content
                }
            });

            gsap.fromTo(
                effect,
                { scale: 1, opacity: 1, y: 0 },
                {
                    scale: 0.3,
                    opacity: 0,
                    y: 400,
                    ease: "power1.inOut",
                    scrollTrigger: {
                        trigger: lastCard,
                        start: "top top",
                        end: commonEndDistance, // Same end point as other sections
                        scrub: true,
                    },
                }
            );
        }
    });
</script>