Code - Spread Cards On Scroll

				
					<style>
     body, html {

    
     position: relative;
     overflow-x: hidden;
     margin: 0;
     background-color: #111111;
 }

 

 .container {
     position: relative;
     display: grid;
     justify-content: center;
     place-items: center;
     gap: 1.5rem;
    
    


 }

 .cards {
     position: relative;
    
     height: 250px;
     display: flex;
     justify-content: center;
     --card-width: 200px;
     --spacing: calc(var(--card-width) / 2);
     opacity: 0;
     
    
 }

 .card {
     width: var(--card-width);
     height: var(--card-width);
     position: absolute;
     top: 0;
     left: 50%;
     border-radius: 1rem;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
  
    
    
    
     /* CSS transforms for different states */
     transform: translateX(-50%);
     /* Add smooth transition for transform changes */
     transform-origin: center center;
     /* background-image: url("../img/Espresso\ on\ Drip\ Tray.png"); */
     background-size: cover;

 }

 .cards.spread .card {
     transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
     

 }

 /* bg image */

  .cards .card:nth-child(1) {
  background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/3-1.jpg");

  }
  .cards .card:nth-child(2) {
background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/9-e1753965396328.webp");

  }
  .cards .card:nth-child(3) {
 background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/2-1-e1753963866836.jpg");

  }
  .cards .card:nth-child(4) {
  background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/7-1.jpg");

  }
  .cards .card:nth-child(5) {
     background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/1-e1753965118363.jpg");
  
  }
  .cards .card:nth-child(6) {
  background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/6-e1753965295131.jpg"); 

  }
  .cards .card:nth-child(7) {
 background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/4-1.jpg"); 

 object-fit: cover;
  }

 /* Stacked state transforms */
 .cards.stacked .card:nth-child(1) {
     transform: translateX(-50%) rotate(-10deg);
       
 }

 .cards.stacked .card:nth-child(2) {
     transform: translateX(-50%) rotate(-10deg);
      
 }

 .cards.stacked .card:nth-child(3) {
     transform: translateX(-50%) rotate(-10deg);
     
 }

 .cards.stacked .card:nth-child(4) {
     transform: translateX(-50%) rotate(-10deg);
    
 }

 .cards.stacked .card:nth-child(5) {
     transform: translateX(-50%) rotate(-10deg);
   
 }

 .cards.stacked .card:nth-child(6) {
     transform: translateX(-50%) rotate(-10deg);
    
 }

 .cards.stacked .card:nth-child(7) {
     transform: translateX(-50%) rotate(-10deg);
     
 }

 
 /* Spread state transforms */
 .cards.spread .card:nth-child(1) {
     transform: translate(calc(-50% - var(--spacing) * 3.6), 40px) rotate(-12deg);
 }

 .cards.spread .card:nth-child(2) {
     transform: translate(calc(-50% - var(--spacing) * 2.4), -10px) rotate(-6deg);
 }

 .cards.spread .card:nth-child(3) {
     transform: translate(calc(-50% - var(--spacing) * 1.3), 10px) rotate(-4deg);
 }

 .cards.spread .card:nth-child(4) {
     transform: translate(calc(-50% + 0px), 10px) rotate(0deg);
 }

 .cards.spread .card:nth-child(5) {
     transform: translate(calc(-50% + var(--spacing) * 1.3), 10px) rotate(4deg);
 }

 .cards.spread .card:nth-child(6) {
     transform: translate(calc(-50% + var(--spacing) * 2.4), 20px) rotate(8deg);
 }

 .cards.spread .card:nth-child(7) {
     transform: translate(calc(-50% + var(--spacing) * 3.6), 10px) rotate(12deg);
 }



 /* vertical stacking */

 .cards.verticalspread .card:nth-child(1) {
     transform: translate(0%, 0%) scale(1);

 }

 .cards.verticalspread .card:nth-child(2) {
     transform: translate(45%, 25%) scale(0.97);

 }

 .cards.verticalspread .card:nth-child(3) {
     transform: translate(90%, 50%) scale(0.94);

 }

 .cards.verticalspread .card:nth-child(4) {
     transform: translate(135%, 75%) scale(0.91);

 }

 .cards.verticalspread .card:nth-child(5) {
     transform: translate(180%, 100%) scale(0.88);

 }

 .cards.verticalspread .card:nth-child(6) {
     transform: translate(225%, 125%) scale(0.85);

 }

 /* Popup styles */
 .popup,
 .popup-showcase {
     position: absolute;
     top: -50px;
     left: 50%;
     transform: translateX(-50%) scale(0);
     background: #333;
     color: white;
     padding: 8px 12px;
     border-radius: 6px;
     font-size: 14px;
     font-weight: bold;
     font-family: "DM Sans", Sans-serif;
     white-space: nowrap;
     opacity: 0;
     z-index: 10;
     pointer-events: none;
 }

 .popup::after,
 .popup-showcase::after {
     content: '';
     position: absolute;
     top: 100%;
     left: 70%;
     transform: translateX(-50%);
     border: 6px solid transparent;

 }

 .popup.one {
     background-color: #FE891D;
 }

 .popup.one::after {
     border-top-color: #FE891D;

 }
 .popup.two {
     background-color: #A104CA;
 }

 .popup.two::after {
     border-top-color: #A104CA;

 }
 .popup-showcase.one {
     background-color: #FD871A;
 }

  .popup-showcase.one::after {
     border-top-color: #FD871A;

 }
 .popup-showcase.two {
     background-color: #A31A9C;
 }

 .popup-showcase.two::after {
     border-top-color: #A31A9C;

 }

 /* Popup visible state */
 .popup.show {
     transform: translateX(-50%) scale(1);
     opacity: 1;
 }

 .text-landing {
     text-align: center;
 }

 

 
 


 

 .text-landing {
     position: relative;
     z-index: -1;
 }

 
  

  

 
 

 

 
 

 .card {
     will-change: transform;
 }

 /* Tablet - Hide cards 4, 5, 6, 7 - only show first 3 cards */
 @media (max-width: 768px) {

     .card:nth-child(1),
     .card:nth-child(2),
     .card:nth-child(6),
     .card:nth-child(7) {
         display: none;
     }

     .container {
         height: 80vh;
         align-content: center;
         gap: 2.5rem;
     }

     .cards {
         position: relative;
         width: auto;
         height: 200px;
         display: flex;
         justify-content: center;
         --card-width: 150px;
         --spacing: calc(var(--card-width) / 2);
         opacity: 0;
     }

    
    

     
    
 }
 
 
 }
</style>





 <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.12.2/gsap.min.js?ver=1767193378"></script>
    <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/npm/gsap@3.13.0/dist/ScrollTrigger.min.js?ver=1767193378"></script>
    <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/npm/gsap@3.13.0/dist/SplitText.min.js?ver=1767193378"></script>
    <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/lenis@1.3.8/dist/lenis.min.js?ver=1767193378"></script>

 <script>
        // Initialize a new Lenis instance for smooth scrolling
        // Initialize Lenis
        const lenis = new Lenis({
            autoRaf: true,
        });

        // Listen for the scroll event and log the event data
        lenis.on('scroll', (e) => {

        });

    </script>
 

    <script>
        gsap.registerPlugin(SplitText)
        gsap.registerPlugin(ScrollTrigger)
        
// GSAP Timeline for professional header entrance animation
// GSAP Timeline for professional header entrance animation
function initHeaderAnimation() {
   // Create master timeline
   const tl = gsap.timeline();
   
   // Set initial states - fade in from below with blur
   gsap.set(".logo-container img", { 
       opacity: 0, 
       y: 50,
       filter: "blur(10px)"
   });
   
   gsap.set(".links-wrapper .hfe-nav-menu li", { 
       opacity: 0, 
       y: 50,
       filter: "blur(10px)"
   });
   
   gsap.set(".hfe-nav-menu__toggle", { 
       opacity: 0, 
       y: 50,
       filter: "blur(10px)"
   });

   // Animate logo entrance
   tl.to(".logo-container img", {
       duration: 1,
       opacity: 1,
       y: 0,
       filter: "blur(0px)",
       ease: "power2.out"
   })
   
   // Animate navigation items with reverse stagger (last item first)
   .to(".links-wrapper .hfe-nav-menu li", {
       duration: 0.8,
       opacity: 1,
       y: 0,
       filter: "blur(0px)",
       stagger: {
           each: 0.15,
           from: "end"
       },
       ease: "power2.out"
   }, "-=0.6")
   
   // Animate mobile toggle
   .to(".hfe-nav-menu__toggle", {
       duration: 0.7,
       opacity: 1,
       y: 0,
       filter: "blur(0px)",
       ease: "power2.out"
   }, "-=0.4");

   return tl;
}

// Function to replay animation
function replayAnimation() {
   initHeaderAnimation();
}

// Initialize when page loads
document.addEventListener('DOMContentLoaded', () => {
   initHeaderAnimation();
});
        // function lockScroll(duration = 4000) {
        //     const scrollY = window.scrollY;

        //     document.body.style.position = 'fixed';
        //     document.body.style.top = `-${scrollY}px`;
        //     document.body.style.left = '0';
        //     document.body.style.right = '0';
        //     document.body.style.width = '100%';
        //     document.body.style.overflow = 'hidden';

        //     setTimeout(() => {
        //         document.body.style.position = '';
        //         document.body.style.top = '';
        //         document.body.style.left = '';
        //         document.body.style.right = '';
        //         document.body.style.width = '';
        //         document.body.style.overflow = '';

        //         window.scrollTo(0, scrollY);
        //     }, duration);
        // }

        // Always scroll to top on reload
        // if ('scrollRestoration' in history) {
        //     history.scrollRestoration = 'manual'; // Disable auto scroll restore
        // }

        // window.addEventListener('beforeunload', () => {
        //     window.scrollTo(0, 0); // Ensures it's at the top before leaving
        // });

        window.addEventListener('load', () => {
            window.scrollTo(0, 0); // Forces top scroll on load
            
             
        });


        const cards = document.querySelector('.cards');
        const toggleBtn = document.getElementById('spreadToggle');
        const popups = document.querySelectorAll('.popup');
        const cardsElement = document.querySelector('.card');
        const computedStyles = getComputedStyle(cardsElement);
        const cardWidth = parseInt(computedStyles.getPropertyValue('--card-width'));
        const spacing = cardWidth / 2;

        gsap.set(popups, {
            scale: 0,
            opacity: 0,
            transformOrigin: "center bottom"
        });



        // GSAP Timeline for spreading animation
        function createSpreadTimeline() {
            const tl = gsap.timeline();
            const spreadData = [
                { x: -spacing * 3.6, y: 40, rotation: -12 },
                { x: -spacing * 2.4, y: -10, rotation: -6 },
                { x: -spacing * 1.3, y: 10, rotation: -4 },
                { x: 0, y: 10, rotation: 0 },
                { x: spacing * 1.3, y: 10, rotation: 4 },
                { x: spacing * 2.4, y: 20, rotation: 8 },
                { x: spacing * 3.6, y: 10, rotation: 12 }
            ];

            tl.set('.cards', { opacity: 1 })
                .from('.cards', { y: '50vh', rotate: -15, duration: 1.5 })
                .call(() => {
                    spreadData.forEach((data, index) => {
                        gsap.to(`.card:nth-child(${index + 1})`, {
                            x: data.x,
                            y: data.y,
                            rotation: data.rotation,
                            duration: 1.2,
                            ease: "cubic-bezier(0.4, 0, 0.2, 1)"
                        });
                    });
                })
                .to(popups, {
                    scale: 1,
                    opacity: 1,
                    duration: 0.3,
                    ease: "back.out(1.7)"
                }, 2.2);

            return tl;
        }
        // Initialize GSAP transforms for popups



        // Auto-start animation after page loads
        window.addEventListener('load', () => {
            // Add a small delay to ensure everything is fully loaded
            setTimeout(() => {
                createSpreadTimeline().play();
            }, 500); // 500ms delay after page load
        });

        document.fonts.ready.then(() => {
            // Create the main timeline
            const mainTimeline = gsap.timeline({delay:1});

            // Set initial states
            gsap.set(".text-landing", { opacity: 1 });
            gsap.set(".heading-split", { opacity: 1 });
            gsap.set(".text-showcase", { opacity: 1 });
            gsap.set(".heading-split-showcase", { opacity: 1 });

            // Create SplitText for both elements
            const splitTextLanding = SplitText.create(".text-landing", {
                type: "words,lines",
                linesClass: "line",
                autoSplit: true
            });

            const splitHeading = SplitText.create(".heading-split", {
                type: "words,lines",
                linesClass: "line",
                autoSplit: true
            });
            const splitTextShowcase = SplitText.create(".text-showcase", {
                type: "words,lines",
                linesClass: "line",
                // autoSplit: true
            });

            const splitHeadingShowcase = SplitText.create(".heading-split-showcase", {
                type: "words,lines",
                linesClass: "line",
                // autoSplit: true
            });
            const splitBadgeShowcase = SplitText.create(".badge-showcase", {
                type: "words,lines",
                linesClass: "line",
                autoSplit: true
            });

            // Add animations to timeline
            mainTimeline
                .from(splitHeading.words, {
                    duration: 2,
                    filter: 'blur(5px)',
                    yPercent: 100,
                    opacity: 0,
                    stagger: 0.2,
                    ease: "expo.out"
                }, 0) // Start immediately
                .from(splitTextLanding.words, {
                    duration: 1.5,
                    filter: 'blur(5px)',
                    yPercent: 100,
                    opacity: 0,
                    stagger: 0.05,
                    ease: "expo.out"
                }, 2.5) // Start at 3 seconds
                .from('.button-landing-cta', {
                    autoAlpha: 0,
                    y: 40,
                    stagger: 0.2,
                    duration: 1
                }, 3); // Start at 3.5 seconds

            // Showcase section timeline (ScrollTrigger activated)
            const showcaseTimeline = gsap.timeline({
                scrollTrigger: {
                    trigger: ".showcase", // or use a wrapper element like ".showcase-section"
                    start: "clamp(top center)",
                     end: "bottom top",
                    //end: "bottom 65%",
                    toggleActions: "play none none none",
                    // scrub: true,
                    // markers: true // uncomment for debugging
                }
            });

            showcaseTimeline
                .from(splitBadgeShowcase.words, {
                    duration: 1.2,
                    filter: 'blur(5px)',
                    yPercent: 100,
                    opacity: 0,
                    ease: "expo.out"

                })
                .from(splitHeadingShowcase.words, {
                    duration: 1.5,
                    filter: 'blur(5px)',
                    yPercent: 100,
                    opacity: 0,
                    stagger: 0.2,
                    ease: "expo.out"
                }, '-=1') // Start immediately when triggered
                .from(splitTextShowcase.words, {
                    duration: 1.5,
                    filter: 'blur(5px)',
                    yPercent: 100,
                    opacity: 0,
                    stagger: 0.05,
                    ease: "expo.out"
                }, 1.5) // Start 1 seconds after heading
                .from('.button-showcase-cta', {
                    autoAlpha: 0,
                    y:40,
                    stagger: 0.2,
                    duration: 1
                }, "-=1.3");
            // Return both timelines for external control
            return {
                landing: mainTimeline,
                showcase: showcaseTimeline
            };
        });




        // Select the two elements

        const showcase = document.querySelector('.showcase');

        // Get the bottom position of the .showcase section
        const showcaseBottom = showcase.offsetTop + showcase.offsetHeight;

        // Get the top position of the .cards element
        const cardsTop = cards.getBoundingClientRect().top + window.scrollY;
        const cardsBottom = cards.offsetTop + cards.offsetHeight;

        // Calculate the distance
        let distance = showcaseBottom - cardsTop + 100;
        let distanceMobile = showcaseBottom - cardsTop + 280;


        // console.log('Distance between .cards and bottom of .showcase:', distance, 'px');

        // 1. Wait a bit for the initial spread to happen
        // Replace the existing scroll trigger section in your code with this:

        // 1. Wait a bit for the initial spread to happen
        setTimeout(() => {
            const cards = document.querySelectorAll('.cards .card');
            // Calculate spread positions from CSS custom properties


            // const spreadData = [
            //     { x: -spacing * 3.6, y: 40, rotation: -12 },
            //     { x: -spacing * 2.4, y: -10, rotation: -6 },
            //     { x: -spacing * 1.3, y: 10, rotation: -4 },
            //     { x: 0, y: 10, rotation: 0 },
            //     { x: spacing * 1.3, y: 10, rotation: 4 },
            //     { x: spacing * 2.4, y: 20, rotation: 8 },
            //     { x: spacing * 3.6, y: 10, rotation: 12 }
            // ];

            // Remove all CSS classes to avoid conflicts
            // document.querySelector('.cards').classList.remove('spread', 'stacked');


            // Use fromTo instead of set + to for smoother animation
            // cards.forEach((card, i) => {
            //     // Set initial spread position immediately without transition
            //     gsap.set(card, {
            //         x: spreadData[i].x,
            //         y: spreadData[i].y,
            //         rotation: spreadData[i].rotation,
            //         xPercent: -50,
            //         // Enable hardware acceleration
            //     });
            // });
            // remove the popup 
            gsap.to(popups, {
                scrollTrigger: {
                    trigger: ".cards",
                    start: "bottom center",
                    // endTrigger: ".text-showcase",
                    // end: "bottom top",
                    toggleActions: "play none none reverse",
                },
                scale: 0,
                // opacity: 1,
                duration: 0.3,
                ease: "back.in(1.7)"
            });
            // STEP 1: Animate cards from spread → stacked (with scrub)
            cards.forEach((card, i) => {

                gsap.to(card, {
                    scrollTrigger: {
                        trigger: ".cards",
                        start: "top 20%",
                        endTrigger: ".text-showcase",
                        end: "bottom bottom",
                        scrub: true,


                    },
                    x: 0,
                    y: 0,
                    rotation: 0,
                    ease: "none",
                    xPercent: -50
                });
            });

            // STEP 2: Animate the whole wrapper down (this completes first)
            gsap.to('.cards', {
                scrollTrigger: {
                    trigger: ".cards",
                    start: "top 20%",
                    endTrigger: ".text-showcase",
                    end: "bottom center", // This completes at "bottom top"
                    scrub: true,
                    // markers: true,
                    id: '2',
                   

                },
                y: distance,
                ease: "none",
            });
            // popup showcase 
            gsap.to('.popup-showcase', {
                scrollTrigger: {
                    trigger: ".text-showcase",
                    start: "bottom 55%",
                    endTrigger: ".text-showcase",
                    end: "bottom center",
                    toggleActions: "play none none reverse",
                    // markers:true,

                },
                scale: 1,
                opacity: 1,
                duration: 0.3,
                rotate: -5,
                delay: .5,
                repeatDelay: .5,
                ease: "back.out(1.7)"
            });
            // STEP 3: Vertical spread trigger - starts AFTER the y:distance is complete
            const verticalSpreadData = [
                { xPercent: -50, yPercent: 0, scale: 1.2 },   // Card 1 - starting from -50
                { xPercent: 30, yPercent: 18, scale: 1.19 },  // Card 2 - maintained 80 unit increment
                { xPercent: 110, yPercent: 36, scale: 1.18 }, // Card 3 - maintained 80 unit increment
                { xPercent: 190, yPercent: 54, scale: 1.17 }, // Card 4 - maintained 80 unit increment
                { xPercent: 270, yPercent: 72, scale: 1.16 }, // Card 5 - maintained 80 unit increment
                { xPercent: 350, yPercent: 90, scale: 1.15 }, // Card 6 - maintained 80 unit increment
                { xPercent: 430, yPercent: 108, scale: 1.14 }, // Card 7 - maintained 80 unit increment
            ];




            // Animate each card's vertical spread with scrub
            cards.forEach((card, i) => {
                gsap.to(card, {
                    scrollTrigger: {
                        trigger: ".text-showcase",
                        start: "bottom 60%",
                        endTrigger: ".text-showcase",
                        end: "bottom center", // This completes at "bottom top"
                        id: 'll',
                        toggleActions: "play none none reverse",
                        // markers: true
                    },
                    xPercent: verticalSpreadData[i].xPercent,
                    yPercent: verticalSpreadData[i].yPercent,
                    scale: verticalSpreadData[i].scale,
                    // duration:2,
                    ease: "none" // Use "none" for scrub animations
                });
            });

            // Reset back to stacked positions (after y:distance movement)
            gsap.matchMedia().add("(max-width: 768px)", () => {


                ScrollTrigger.getAll().forEach(trigger => {
                    if (trigger.vars.id === '2' || trigger.vars.id === 'll' ||
                        trigger.trigger === document.querySelector('.cards') ||
                        trigger.trigger === document.querySelector('.text-showcase')) {
                        trigger.kill();
                    }
                });
                // Hide cards 1, 2, 6, 7 (indices 0, 1, 5, 6)
                const cardsToHide = [0, 1, 5, 6];
                cardsToHide.forEach(index => {
                    if (cards[index]) {
                        gsap.set(cards[index], { display: "none" });
                    }
                });

                // Show only cards 3, 4, 5 (indices 2, 3, 4) and apply vertical spread data
                const visibleCards = [cards[2], cards[3], cards[4]]; // 3rd, 4th, 5th cards
                const tabletSpreadData = [
                    { xPercent: -50, yPercent: 0, scale: 1.16 }, // 3rd card (index 2) - repositioned as first
                    { xPercent: 30, yPercent: 18, scale: 1.14 }, // 4th card (index 3) - repositioned as second
                    { xPercent: 110, yPercent: 36, scale: 1.12 }  // 5th card (index 4) - repositioned as third
                ];

                // Remove popup animations for tablet
                gsap.to(popups, {
                    scrollTrigger: {
                        trigger: ".cards",
                        start: "bottom center",
                        toggleActions: "play none none reverse",
                    },
                    scale: 0,
                    duration: 0.3,
                    ease: "back.in(1.7)"
                });

                // Animate visible cards from spread → stacked
                visibleCards.forEach((card, i) => {
                    if (card) {
                        gsap.to(card, {
                            scrollTrigger: {
                                trigger: ".cards",
                                start: "top 25%",
                                endTrigger: ".text-showcase",
                                end: "bottom bottom",
                                scrub: true,
                            },
                            x: 0,
                            y: 0,
                            rotation: 0,
                            ease: "none",
                            xPercent: -50
                        });
                    }
                });

                // Animate the whole wrapper down
                gsap.to('.cards', {
                    scrollTrigger: {
                        trigger: ".cards",
                        start: "top 25%",
                        endTrigger: ".text-showcase",
                        end: "bottom center",
                        scrub: true,
                    },
                    y: distanceMobile,
                    ease: "none",
                });

                // Popup showcase animation
                gsap.to('.popup-showcase', {
                    scrollTrigger: {
                        trigger: ".text-showcase",
                        start: "bottom 55%",
                        endTrigger: ".text-showcase",
                        end: "bottom center",
                        toggleActions: "play none none reverse",
                    },
                    scale: 1,
                    opacity: 1,
                    duration: 0.3,
                    delay: .5,
                    repeatDelay: .5,
                    ease: "back.out(1.7)"
                });

                // Apply vertical spread to visible cards with tablet-specific data
                visibleCards.forEach((card, i) => {
                    if (card) {
                        gsap.to(card, {
                            scrollTrigger: {
                                trigger: ".text-showcase",
                                start: "bottom 60%",
                                endTrigger: ".text-showcase",
                                end: "bottom center",
                                toggleActions: "play none none reverse",
                            },
                            xPercent: tabletSpreadData[i].xPercent,
                            yPercent: tabletSpreadData[i].yPercent,
                            scale: tabletSpreadData[i].scale,
                            ease: "none"
                        });
                    }
                });

            });
        }, 4000);
        
        // GSAP MatchMedia for tablet and below
        // GSAP matchMedia for tablet and below


    </script>