All materials:

				
					<link data-minify="1" rel="stylesheet" href="https://nicolaipalmkvist.com/wp-content/cache/min/1/lenis@1.3.11/dist/lenis.css?ver=1770156410"> 
   <script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/npm/gsap@3.13.0/dist/ScrollToPlugin.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 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>// Initialize a new Lenis instance for smooth scrolling
const lenis = new Lenis();

// Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
lenis.on('scroll', ScrollTrigger.update);

// Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker
// This ensures Lenis's smooth scroll animation updates on each GSAP tick
gsap.ticker.add((time) => {
  lenis.raf(time * 1000); // Convert time from seconds to milliseconds
});

// Disable lag smoothing in GSAP to prevent any delay in scroll animations
gsap.ticker.lagSmoothing(0);



// new lenis 




</script>


// <script>
// gsap.registerPlugin(SplitText)
// gsap.registerPlugin(ScrollTrigger)
//      gsap.registerPlugin(ScrollToPlugin) 
//         // Create ScrollTrigger for section 2
//       ScrollTrigger.create({
//     trigger: ".promo-section",
//     start: "bottom 95%",
//     onEnter: () => {
        
//         // Wait for next frame to ensure smooth start
//         requestAnimationFrame(() => {
//             requestAnimationFrame(() => {
//                 gsap.to(window, { 
//                     duration: 3, 
//                     scrollTo: { 
//                         y: "#marquee-container", 
//                         offsetY: 150 
//                     },
//                     ease: "power1.inOut"
//                 });
//             });
//         });
//     },
//     // once: true
// });
// </script>
<script> class ViewportTriggeredMarquee {
    constructor() {
        this.container = document.getElementById('marquee-container');
        this.images = [];
        this.amplitude = 150;
        this.arcMultiplier = .3; // Default arc multiplier
        this.hasAnimated = false;

        this.init();
    }

    init() {
        this.collectImages();
        this.updateResponsiveSettings();
        this.positionIPhoneFrame();
        this.setupIntersectionObserver();

        // Add resize listener
        window.addEventListener('resize', () => {
            this.updateResponsiveSettings();
            this.positionIPhoneFrame();
        });
    }

    updateResponsiveSettings() {
        const width = window.innerWidth;

        if (width < 768) {
            // Mobile: 5 images
            this.visibleImages = 5;
            this.amplitude = 70;
            this.arcMultiplier = -2;
        } else if (width >= 768 && width <= 1200) {
            // Tablet: 7 images
            this.visibleImages = 7;
            this.amplitude = 120;
            this.arcMultiplier = .2;
        } else if (width > 1200 && width <= 1350) {
            // Large tablet: 9 images
            this.visibleImages = 7;
            this.amplitude = 120;
            this.arcMultiplier = .3;
        } else {
            // Desktop: 11 images
            this.visibleImages = 7;
            this.amplitude = 150;
            this.arcMultiplier = .3;
        }

        this.showHideImages();
    }

    showHideImages() {
        // Show/hide images based on screen size
        this.images.forEach((imageObj, index) => {
            if (index < this.visibleImages) {
                imageObj.element.style.display = 'block';
                imageObj.active = true;
            } else {
                // imageObj.element.style.display = 'none';
                imageObj.active = false;
            }
        });

        // Update active images array
        this.activeImages = this.images.filter(img => img.active);
    }

    collectImages() {
        const imageElements = this.container.querySelectorAll('.image-item');

        this.images = Array.from(imageElements).map((element, index) => ({
            element: element,
            index: index,
            active: true
        }));
    }

    positionIPhoneFrame() {
        // Always position at the center of the visible images
        const centerProgress = 0.5;
        const centerPosition = this.calculatePosition(centerProgress);

        const iPhoneFrame = document.querySelector('.iphone-frame');
        if (iPhoneFrame) {
            iPhoneFrame.style.left = centerPosition.x + 'px';
            iPhoneFrame.style.top = centerPosition.y + 'px';
        }
    }

    setupIntersectionObserver() {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting && entry.intersectionRatio >= 0.5 && !this.hasAnimated) {
                        this.startAnimation();
                        this.hasAnimated = true;
                    }
                });
            },
            {
                threshold: [0.5]
            }
        );

        observer.observe(this.container);
    }

    calculatePosition(progress) {
        // Cap the effective window width at 2500px for ultra-wide screens
        const actualWidth = window.innerWidth;
        const windowWidth = Math.min(actualWidth, 2500);
        const windowHeight = window.innerHeight;

        // X position: start from right and move to left within the capped width
        const x = (windowWidth + 100) - (progress * (windowWidth + 200));

        // Y position follows an arc above center
        // const normalizedX = Math.max(0, Math.min(1, progress)) * Math.PI;
        // const y = (windowHeight / 2) - Math.sin(normalizedX) * this.amplitude;
        const normalizedX = Math.max(0, Math.min(1, progress)) * Math.PI;
        const arcOffset = this.amplitude * this.arcMultiplier;
        const y = (windowHeight / 2) - Math.sin(normalizedX) * this.amplitude + arcOffset;

        return { x, y };
    }

    getLeftOffset() {
        const actualWidth = window.innerWidth;
        return actualWidth > 2500 ? (actualWidth - 2500) / 2 : 0;
    }

    startAnimation() {
        // Phase 1: Reveal all active cards along the path
        this.revealCards().then(() => {
            // Phase 2: Move cards sequentially
            setTimeout(() => {
                this.moveCardsSequentially();
            }, 1000);
        });
    }

    async revealCards() {
        return new Promise((resolve) => {
            const totalDuration = 2500;
            const startTime = performance.now();

            // Set initial positions for active images only
            this.activeImages.forEach((imageObj, index) => {
                const startProgress = (index / (this.activeImages.length - 1)) - 0.8;
                const startPosition = this.calculatePosition(startProgress);

                imageObj.element.style.left = startPosition.x + 'px';
                imageObj.element.style.top = startPosition.y + 'px';
                imageObj.element.style.transform = 'translate(-50%, -50%)';
                imageObj.element.style.opacity = 1;
            });

            const animate = (currentTime) => {
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / totalDuration, 1);
                const easedProgress = 1 - Math.pow(1 - progress, 3);

                this.activeImages.forEach((imageObj, index) => {
                    const startProgress = (index / (this.activeImages.length - 1)) - 0.8;
                    const targetProgress = index / (this.activeImages.length - 1);
                    const currentProgress = startProgress + (targetProgress - startProgress) * easedProgress;
                    const position = this.calculatePosition(currentProgress);

                    imageObj.element.style.left = position.x + 'px';
                    imageObj.element.style.top = position.y + 'px';
                });

                if (progress < 1) {
                    requestAnimationFrame(animate);
                } else {
                    // Ensure exact final positions
                    this.activeImages.forEach((imageObj, index) => {
                        const finalProgress = index / (this.activeImages.length - 1);
                        const finalPosition = this.calculatePosition(finalProgress);
                        imageObj.element.style.left = finalPosition.x + 'px';
                        imageObj.element.style.top = finalPosition.y + 'px';
                    });
                    resolve();
                }
            };

            requestAnimationFrame(animate);
        });
    }

    moveCardsSequentially() {
        this.stepIndex = 0;

        // Ensure cards are in exact initial positions
        this.activeImages.forEach((imageObj, index) => {
            const initialProgress = index / (this.activeImages.length - 1);
            const position = this.calculatePosition(initialProgress);
            imageObj.element.style.left = position.x + 'px';
            imageObj.element.style.top = position.y + 'px';
            imageObj.element.style.opacity = 1;
        });

        this.moveToNextStep();
    }

    moveToNextStep() {
        const stepDuration = 800;
        const startTime = performance.now();

        const currentPositions = this.activeImages.map((imageObj) => ({
            x: parseFloat(imageObj.element.style.left),
            y: parseFloat(imageObj.element.style.top)
        }));

        const animate = (currentTime) => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / stepDuration, 1);
            const easedProgress = 1 - Math.pow(1 - progress, 3);

            this.activeImages.forEach((imageObj, index) => {
                const currentCardPosition = index + this.stepIndex;
                const targetCardPosition = currentCardPosition + 1;

                let normalizedTarget = (targetCardPosition / (this.activeImages.length - 1)) % (this.activeImages.length / (this.activeImages.length - 1));

                const currentPos = currentPositions[index];
                let targetPosition = this.calculatePosition(normalizedTarget);

                if (targetPosition.x > currentPos.x + (window.innerWidth / 2)) {
                    const offScreenRightProgress = -0.3;
                    const offScreenRightPosition = this.calculatePosition(offScreenRightProgress);

                    const x = offScreenRightPosition.x + (targetPosition.x - offScreenRightPosition.x) * easedProgress;
                    const y = offScreenRightPosition.y + (targetPosition.y - offScreenRightPosition.y) * easedProgress;

                    imageObj.element.style.left = x + 'px';
                    imageObj.element.style.top = y + 'px';
                } else {
                    const x = currentPos.x + (targetPosition.x - currentPos.x) * easedProgress;
                    const y = currentPos.y + (targetPosition.y - currentPos.y) * easedProgress;

                    imageObj.element.style.left = x + 'px';
                    imageObj.element.style.top = y + 'px';
                }

                const currentX = parseFloat(imageObj.element.style.left);
                if (currentX < -100) {
                    imageObj.element.style.opacity = 0;
                } else {
                    imageObj.element.style.opacity = 1;
                }
            });

            if (progress < 1) {
                requestAnimationFrame(animate);
            } else {
                this.stepIndex++;
                setTimeout(() => {
                    this.moveToNextStep();
                }, 800);
            }
        };

        requestAnimationFrame(animate);
    }
}

// Initialize the marquee
const marquee = new ViewportTriggeredMarquee();</script>
<script>
gsap.registerPlugin(SplitText)
gsap.registerPlugin(ScrollTrigger)




const breakpoint = 767;

gsap.set('.icon', { scale: 0 })
gsap.set('.text-bar', { scale: 0 })

let totalDistance;

const marqueeContainer = document.getElementById('marquee-container');

const buttonSecondary = document.querySelector('.btn-secondary')
const secondaryIcon = document.querySelector('.btn-sec-icon');
const buttonSecondaryWidth = buttonSecondary.offsetWidth
const secondaryIconWidth = secondaryIcon.offsetWidth

const buttonSecondarydistancefromLeft = buttonSecondary.getBoundingClientRect().right
const secondaryIcondistancefromLeft = secondaryIcon.getBoundingClientRect().right;

const button_icon_distance = buttonSecondarydistancefromLeft - secondaryIcondistancefromLeft;

const c = (2 * button_icon_distance) + secondaryIconWidth
const ratio_icon_button = c / buttonSecondaryWidth;
const offset = -(buttonSecondaryWidth / 2) + (c / 2);
// console.log({
//     buttonSecondary, secondaryIcon, buttonSecondaryWidth, secondaryIconWidth,
//     buttonSecondarydistancefromLeft, secondaryIcondistancefromLeft, button_icon_distance, c, ratio_icon_button
// })

gsap.set(buttonSecondary, { x: -(buttonSecondaryWidth / 2) + (c / 2) })
gsap.set('.btn-secondary-bg', { width: c, x: (buttonSecondaryWidth - c) })
// gsap.set('.btn-sec-inner p', {xPercent: 100})
// gsap.timeline({ delay: 2 }).to('.btn-secondary-bg', { width: buttonSecondaryWidth, x: (buttonSecondaryWidth / 2) - (c / 2) })
//     .to('.btn-sec-icon', { x: (buttonSecondaryWidth / 2) - (c / 2) }, '<')
//     .to('.btn-sec-inner p', { x: (buttonSecondaryWidth / 2) - (c / 2) }, '<')


document.fonts.ready.then(() => {
    const mainTimelineLanding = gsap.timeline()
    const promoTimeline = gsap.timeline();
    const splitHeading = SplitText.create(".hero-heading", {
        type: "words,lines",
        linesClass: "line",
        autoSplit: true
    });

    const splitPara = SplitText.create(".hero-paragraph", {
        type: "words,lines",
        linesClass: "line",
        autoSplit: true
    });
    const splitPromoHeading = SplitText.create(".promo-heading", {
        type: "words,lines",
        linesClass: "line",
        autoSplit: true
    });

    const splitPromoPara = SplitText.create(".promo-paragraph", {
        type: "lines",
        linesClass: "line",
        autoSplit: true
    });
    const splitPromoBadge = SplitText.create(".promo-badge", {
        type: "lines",
        linesClass: "line",
        autoSplit: true
    });
    gsap.set(".hero-heading", { opacity: 1 });
    gsap.set(".hero-paragraph", { opacity: 1 });
    mainTimelineLanding
        .from(splitHeading.words, {
            duration: 1.3,
            filter: 'blur(5px)',
            yPercent: 40,
            opacity: 0,
            stagger: 0.02,
            ease: "expo.out"
        })
        .from(splitPara.lines, {
            duration: 1.3,
            filter: 'blur(5px)',
            yPercent: 100,
            opacity: 0,
            stagger: 0.2,
            ease: "expo.out"
        }, '-=1')
        .to('.btn-primary', {
            y: 0,
            filter: 'blue(5px)',
            duration: .3,
            opacity: 1,
            stagger: 0.1,
            ease:'sine.out',
        }, '-=.8')

    gsap.from(splitPromoHeading.words, {
        duration: 0.5,
        filter: 'blur(5px)',
        yPercent: 40,
        opacity: 0,
        stagger: 0.02,
        ease: "expo.out",
        scrollTrigger: {
            trigger: splitPromoHeading.words[0]?.parentElement || ".promo-heading",
            start: "top 90%",
            // toggleActions: "play none none reverse"
        }
    });

    // Badge animation
    gsap.from(splitPromoPara.lines, {
        duration: 1.3,
        filter: 'blur(5px)',
        yPercent: 100,
        opacity: 0,
        stagger: 0.2,
        ease: "expo.out",
        scrollTrigger: {
            trigger: splitPromoBadge.lines[0]?.parentElement || ".promo-badge",
            start: "top 70%",
            // toggleActions: "play none none reverse"
        }
    });

    // Button animation
    gsap.from(splitPromoBadge.lines, {
        yPercent: 80,
        filter: 'blur(5px)',
        duration: .8,
        opacity: 0,
        stagger: 0.2,
        scrollTrigger: {
            trigger: ".btn-primary",
            start: "top 70%",
            // toggleActions: "play none none reverse"
        }
    });


    gsap.timeline({
        scrollTrigger: {
            trigger: ".btn-secondary", // Or use a parent container
            start: "top 70%", // Animation starts when top of element hits 70% from top of viewport
            // end: "bottom 30%", // Optional: end point
            // toggleActions: "play none none reverse", // play on enter, reverse on leave
            // markers: true, // Uncomment for debugging
        }
    })
        .from('.btn-secondary', { scale: .1, duration: .4, transformOrigin: `${(buttonSecondaryWidth / 2) - offset}px center` })
        .to('.btn-secondary-bg', {
            width: buttonSecondaryWidth,
            x: (buttonSecondaryWidth / 2) - (c / 2)
        })
        .to('.btn-sec-icon', {
            x: (buttonSecondaryWidth / 2) - (c / 2)
        }, '<')
        .to('.btn-sec-inner p', {
            x: (buttonSecondaryWidth / 2) - (c / 2)
        }, '<');

})


function animateCard(card, delay = 0) {
    const icon = card.querySelector('.icon');
    const textBar = card.querySelector('.text-bar');
    const container = card.querySelector('.container');

    // Get actual dimensions
    const textBarWidth = textBar.offsetWidth;
    const iconWidth = icon.offsetWidth;
    totalDistance = textBarWidth + iconWidth;

    // Create timeline for this card
    const tl = gsap.timeline({
        delay: delay,
        // repeat: -1,
        repeatDelay: 2,
    });

    // Animation sequence
    tl.to(icon, { scale: 1 })
    tl.to(textBar, { scale: 1 }, '<')
        .to(icon, {
            x: -totalDistance * 2 / 3,
            borderRadius: "12px 0 0 12px",
            duration: 1.2,
            ease: 'power2.out'
        })
        .to(textBar, {
            clipPath: 'inset(0 0 0 0%)',
            borderRadius: "0 12px 12px 0",
            duration: 1.2,
            x: totalDistance / 3,
            ease: 'power2.out'
        }, "<") // Start at the same time as icon animation


}


// Wait for page load then start animations
const cards = document.querySelectorAll('.card');
// window.addEventListener('load', () => {
    // gsap.matchMedia().add(`(min-width: ${breakpoint + 1}px)`, () => {

        // Animate each card with a slight delay between them
        cards.forEach((card, index) => {
            // animateCard(card, 1.5 + (index * 0.3));
            animateCard(card, 1.2);
        });
    // })
// });




function calculateDistance() {
    const cardThree = document.querySelector('.card-three');
    const btnSecondary = document.querySelector('.btn-secondary');

    if (!cardThree || !btnSecondary) {
        console.log('Elements not found!');
        return null;
    }

    // Get bounding rectangles
    const cardRect = cardThree.getBoundingClientRect();
    const btnRect = btnSecondary.getBoundingClientRect();

    // Calculate different types of distances
    const verticalDistance = btnRect.top - cardRect.bottom;
    const horizontalDistance = btnRect.left - cardRect.right;
    const centerToCenter = Math.sqrt(
        Math.pow(btnRect.left + btnRect.width / 2 - (cardRect.left + cardRect.width / 2), 2) +
        Math.pow(btnRect.top + btnRect.height / 2 - (cardRect.top + cardRect.height / 2), 2)
    );

    // Get absolute positions (accounting for scroll)
    const scrollY = window.scrollY;
    const cardAbsoluteTop = cardRect.top + scrollY;
    const btnAbsoluteTop = btnRect.top + scrollY;
    const absoluteVerticalDistance = btnAbsoluteTop - (cardAbsoluteTop + cardRect.height);

    const distances = {
        vertical: verticalDistance,
        horizontal: horizontalDistance,
        centerToCenter: centerToCenter,
        absoluteVertical: absoluteVerticalDistance,
        cardPosition: cardAbsoluteTop,
        buttonPosition: btnAbsoluteTop
    };

    console.log('Distance Results:', distances);
    return distances;
}

// Call the function
const verticalDistance = calculateDistance().absoluteVertical 

setTimeout(() => {
    gsap.matchMedia().add(`(min-width: ${breakpoint + 1}px)`, () => {

        cards.forEach((card, i) => {
            const cardTimeline = gsap.timeline({
                scrollTrigger: {
                    trigger: ".card-three",
                    start: "top 70%",
                    endTrigger: ".promo-section",
                    end: "top 90%",
                    scrub: true,
                    // markers:true,

                }
            })
            const icon = card.querySelector('.icon')
            const textBar = card.querySelector('.text-bar')
            cardTimeline.to(icon, {

                x: - totalDistance / 3,
                borderRadius: "12px 12px 12px 12px",
                duration: 1.2,
                // ease: 'power2.out'
            })
                .to(textBar, {
                    clipPath: 'inset(0 0 0 100%)',
                    borderRadius: "12px 12px 12px 12px",
                    duration: .7,
                    x: -totalDistance * 1 / 3,
                    opacity: 0
                    // ease: 'power2.out'
                }, '<') // Start at the same time as the reverse icon animation


            const cardTimelineScale = gsap.timeline({
                scrollTrigger: {
                    trigger: ".promo-section",
                    start: "top 90%",
                    endTrigger: ".btn-secondary",
                    end: "top center",
                    scrub: true,
                }
            })
            cardTimelineScale.to(icon, {
                borderRadius: "12px 12px 12px 12px",
                scale: 1.3
            })


        const offseta = (i % 3) * 100
            
        gsap.to(card, {
            scrollTrigger: {
                trigger: ".card-three",
                start: "top 70%",
                endTrigger: ".btn-secondary",
                end: "top center",
                scrub: true,



            },

            y: verticalDistance + offseta,
            borderRadius: "12px 12px 12px 12px",
            ease: "none",

        });

        })


        // card vertical travel animation

    })
    gsap.matchMedia().add(`(max-width: ${breakpoint }px)`, () => {
ScrollTrigger.normalizeScroll(true);
        cards.forEach((card, i) => {
            const cardTimeline = gsap.timeline({
                scrollTrigger: {
                    trigger: ".card-three",
                    start: "top 70%",
                    endTrigger: ".promo-section",
                    end: "top 50%",
                    scrub: true,
                    // markers:true,

                }
            })
            const icon = card.querySelector('.icon')
            const textBar = card.querySelector('.text-bar')
            cardTimeline.to(icon, {

                x: - totalDistance / 3,
                borderRadius: "12px 12px 12px 12px",
                duration: 1.2,
                // ease: 'power2.out'
            })
                .to(textBar, {
                    clipPath: 'inset(0 0 0 100%)',
                    borderRadius: "12px 12px 12px 12px",
                    duration: .7,
                    x: -totalDistance * 1 / 3,
                    opacity: 0
                    // ease: 'power2.out'
                }, '<') // Start at the same time as the reverse icon animation


            const cardTimelineScale = gsap.timeline({
                scrollTrigger: {
                    trigger: ".promo-section",
                    start: "top 90%",
                    endTrigger: ".btn-secondary",
                    end: "top center",
                    scrub: true,
                }
            })
            // cardTimelineScale.to(icon, {
            //     borderRadius: "12px 12px 12px 12px",
            //     scale: 1.3
            // })


        })
            const offseta = 200;
                  const animationConfig = {
                0: verticalDistance + offseta,
                1: (verticalDistance * 1.5) + offseta,
                3: (verticalDistance * 1.3) + offseta,  // Example: 1.5x distance
                4: (verticalDistance * 1) + offseta   // Example: 0.7x distance
            };
            
            cards.forEach((card, i) => {
                if (animationConfig[i] !== undefined) {
                    gsap.to(card, {
                        scrollTrigger: {
                            trigger: ".card-three",
                            start: "top 70%",
                            endTrigger: ".btn-secondary",
                            end: "top center",
                            scrub: .5,
                            invalidateOnRefresh: true,
                            // markers:true,
                        },
                        y: animationConfig[i],
                        x:(i % 2) * 30,
                        borderRadius: "12px 12px 12px 12px",
                        ease: "none",
                    });
                }
            });


        // card vertical travel animation

    })




}, 4000)




// gsap.matchMedia().add(`(min-width: ${breakpoint + 1}px)`, () => {

    cards.forEach((card, i) => {

        gsap.to(cards[0].querySelector('.container'), { // Animate each card, not just cards[0]
            scale: 0,
            opacity: 0,
            x: 120,
            y: 70,
            // x: 20 + (i * 50), // Different x for each card
            // y: 15 + (i * 30),
            // duration: 2.5,
            scrollTrigger: {
                trigger: marqueeContainer,
                // trigger: '.btn-secondary',
                start: "top 52%",
                end: '+=500',
                toggleActions: "play none none reverse",
                // scrub: true,
            },
        });
        gsap.to(cards[1].querySelector('.container'), { // Animate each card, not just cards[0]
            scale: 0,
            opacity: 0,
            x: 150,


            scrollTrigger: {
                trigger: marqueeContainer,
                // trigger: '.btn-secondary',
                start: "top 50%",
                end: '+=500',
                toggleActions: "play none none reverse",
                // scrub: true,
            },
        });
        gsap.to(cards[2].querySelector('.container'), { // Animate each card, not just cards[0]
            scale: 0,
            opacity: 0,
            x: 150,
            y: -60,

            scrollTrigger: {
                trigger: marqueeContainer,
                // trigger: '.btn-secondary',
                start: "top 50%",
                end: '+=500',
                toggleActions: "play none none reverse",
                // scrub: true,
            },
        });
        gsap.to(cards[3].querySelector('.container'), { // Animate each card, not just cards[0]
            scale: 0,
            opacity: 0,
            x: -150,
            y: 70,
            // x: 20 + (i * 50), // Different x for each card
            // y: 15 + (i * 30),
            // duration: 2.5,
            scrollTrigger: {
                trigger: marqueeContainer,
                // trigger: '.btn-secondary',
                start: "top 50%",
                end: '+=500',
                toggleActions: "play none none reverse",
                // scrub: true,
            },
        });
        gsap.to(cards[4].querySelector('.container'), { // Animate each card, not just cards[0]
            scale: 0,
            opacity: 0,
            x: -100,


            scrollTrigger: {
                trigger: marqueeContainer,
                // trigger: '.btn-secondary',
                start: "top 50%",
                end: '+=500',
                toggleActions: "play none none reverse",
                // scrub: true,
            },
        });
        gsap.to(cards[5].querySelector('.container'), { // Animate each card, not just cards[0]
            scale: 0,
            opacity: 0,
            x: -150,
            y: -50,

            scrollTrigger: {
                trigger: marqueeContainer,
                // trigger: '.btn-secondary',
                start: "top 50%",
                end: '+=500',
                toggleActions: "play none none reverse",
                // scrub: true,
            },
        });
    });
// });







</script>