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