AnimationsProNew
Horizontal Scroll Gallery
The section pins to the screen and normal scrolling moves a row of cards sideways. The card in view lights up and a progress bar fills at the bottom.
Customize
color
accentColor
highlightColor
trackColor
Based on Framer Horizontal Scroll (MIT license) · Terms of use
Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Slides in one row. |
| container | RefObject<HTMLElement | null> | — | Scrolling element when the effect lives inside one. Without it the page scroll is used. |
| height | string | "100vh" | Height of the pinned area, any CSS length. |
| length | number | 3 | How many screen heights of scroll the whole ride takes. |
| gap | number | 24 | Space between slides in pixels. |
| showProgress | boolean | true | Thin progress bar at the bottom. |
| focusEffect | boolean | true | Slides not fully in view fade, turn grey and shrink a little. |
| color | string | "#ffffff" | Main colour: the progress bar. Slides read it as var(--gallery-c1). |
| accentColor | string | "#737373" | Second colour. Slides read it as var(--gallery-c2). |
| highlightColor | string | "#e5e5e5" | Light highlight colour. Slides read it as var(--gallery-c3). |
| trackColor | string | "rgba(255, 255, 255, 0.1)" | Colour of the empty track under the progress bar. |
| className | string | — | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge