Horizontal Scroll Section

A GSAP-powered full-viewport section that translates a card track horizontally as the user scrolls, with snap points centred on each card.

HorizontalScrollSection pins itself to the viewport using ScrollTrigger and scrubs a horizontal track animation as the user scrolls vertically. Cards snap into the centre of the viewport one by one. On mobile (< 768 px) cards take up 85 vw; on desktop they are 30 vw.

SSR note — This component uses GSAP and window, so load it with dynamic(() => import(...), { ssr: false }).

Installation

npx shadcn@latest add @adv/horizontal-scroll-section

Usage

import dynamic from 'next/dynamic';

const HorizontalScrollSection = dynamic(
  () => import('@/components/HorizontalScrollSection'),
  { ssr: false }
);

const cards = [
  { id: '1', title: 'Design Systems', description: 'Scalable component libraries.' },
  { id: '2', title: 'Research', description: 'Turning data into decisions.' },
];

<HorizontalScrollSection cards={cards} />

Example

HorizontalScrollSection is a full-viewport, GSAP-pinned horizontal scroll experience.

It requires a scrollable page to function — embed it in a real page for the full effect. The component below shows the card structure inside a bounded container.

Props

Prop	Type	Default	Description
`cards`	`Card[]`	—	Required. Array of cards to display. Each has `id`, `title`, and `description`.
`className`	`string`	`""`	Additional CSS classes applied to the `<section>` element.

Card

Field	Type	Description
`id`	`string`	Unique key for React rendering.
`title`	`string`	Large heading shown in the card.
`description`	`string`	Body copy shown below the title.