Horizontal Scroll Gallery turns vertical scrolling into sideways movement. On laptops and desktops the section pins to the screen and its row of tall image cards slides left as visitors keep scrolling down; when the last card arrives, the page carries on as normal.

Built with GSAP ScrollTrigger

The row is pinned and scrubbed with ScrollTrigger, and the scroll distance is measured from the row itself, so it always matches the number and width of your cards, including after a resize.

A real layout without JavaScript

The section is a swipeable row with CSS scroll snapping first. On phones, without JavaScript, with reduced motion and while you edit it, that is exactly what visitors get, so nothing is ever hidden.

Edit every card

Cards are an editable list of 2 to 12, each with an image, tag, title, text and link. Export HTML, a ZIP, React or Vue, or fork it into My Code. Pair it with the Pinned Scroll Story for a page full of scroll moments.

Getting the most from it

Choose images with the same aspect ratio so the row feels even, and give each card a short tag, such as the room type or the category, so visitors can tell the cards apart as they scroll sideways. Six to eight cards are enough for most pages. Make each title descriptive, since it also becomes the text search engines read, and link every card to its own page. Remember that on a phone the gallery is a normal vertical list, so check that the first card is strong on its own.