<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>

<script>
const slides = document.querySelectorAll('.slide');
let isMobile = window.innerWidth <= 768; // Assuming mobile width is 768px or less

slides.forEach((slide, i) => {
    let position = isMobile ? i * 100 : i * 100; // Adjust the initial position of each slide
    gsap.to(slide, {
        x: position, // Move each slide to a horizontal position
    });
});

let speed = isMobile ? 30 : 30; // Adjust speed if necessary
ScrollTrigger.create({
    trigger: '.scroller',
    start: "top top",
    end: "bottom bottom",
    onUpdate: (self) => {
        gsap.to(slides, {
            x: (i) => {
                let basePosition = isMobile ? i * 100 : i * 100;
                return basePosition - self.progress * speed * 100; // Adjust for horizontal scrolling
            }
        });
    }
});
</script>