DennisDev

thank you on this but the stack blitz link you provide is broken could you update the link

import React, { useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import styled from "styled-components"; gsap.registerPlugin(ScrollTrigger); const Container = styled.div` display: flex; width: 100%; height: 100vh; overflow-x: hidden; `; const Panel = styled.div` box-sizing: border-box; width: 498px; height: 459px; background: #fff; border-radius: 10px; flex: 0 0 auto; padding: 20px; margin-right: 10px; `; export default function IndexPage() { useEffect(() => { const sections = gsap.utils.toArray(".panel"); gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, invalidateOnRefresh: true, anticipatePin: 1, scrub: 1.23, end: () => "+=" + (document.querySelector(".container") as HTMLElement).offsetWidth, }, }); }, []); return ( <Container className="container"> {Array.from({ length: 10 }).map((_, index) => ( <Panel className="panel" key={index}> <h2>Card {index + 1}</h2> </Panel> ))} </Container> ); } I hope this helps I used Next js typescript and style component