Horizontal Showcase Scroll

A GSAP ScrollTrigger horizontal scroll section. As the user scrolls down the page, the content moves horizontally through a series of showcased cards or panels. Clean pinning behavior with responsive fallback.

ReactNext.jsClient ComponentReactGSAP

React

Built for React

All components work in standard React projects using Vite, Create React App, or any other React setup.

Next.js

Next.js native

Full support for App Router, server components, and Next.js-specific APIs like next/image and next/link.

TypeScript

Typed APIs

Every prop is typed. Every component has sensible defaults. No any, no guessing.

Tailwind v4

CSS-native tokens

Design tokens live in CSS using the @theme directive. No separate config file needed.

Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/horizontal-showcase-scroll

Registry endpoint: https://ui.mridha.net/r/horizontal-showcase-scroll.json

Manual Installation

1. Install dependencies

pnpm add gsap

2. Copy the component file

Copy the source from the Code tab above into components/ui/horizontal-showcase-scroll.tsx

3. Import the component

import { HorizontalShowcaseScroll } from "@/components/ui/horizontal-showcase-scroll";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <HorizontalShowcaseScroll />
    </main>
  );
}

Dependencies

gsap

Accessibility

A fallback vertical layout is provided for reduced-motion environments.
All panel content is accessible regardless of scroll state.

Performance

GSAP ScrollTrigger pinning is cleaned up on unmount.
Horizontal scroll is disabled on mobile viewports (below 768px) by default.
Use a limited number of panels — more than 8 increases initial render cost.

Browser Limitations

Pin behavior may conflict with CSS scroll-snap on some browsers.