Horizontal Scroll Gallery

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

51 sectionsView all →
1–5 of 51
Scroll effects

Horizontal Scroll Gallery

Responsive · Animated
Scroll effects

Pinned Scroll Story

Responsive · Animated
Scroll effects

Stacking Cards

Responsive · Animated
Scroll effects

Scroll Path Timeline

Responsive · Animated
Hero

Centred Gradient Hero

Responsive · Animated

Horizontal Scroll Gallery — Free Website Section Template

Scroll effects · v1.0.0 · Updated 2026-10-22 · Responsive · GSAP animation · HTML, React & Vue

CategoryScroll effects
Tagsscrollhorizontal scrollgallerypinnedportfoliogsapdark
Updated October 20, 2026

What's included

Features

Pins and scrolls sideways as visitors scroll down
Scroll distance measured from your cards, resize-safe
Swipeable scroll-snap row on phones and without JS
2 to 12 cards with image, tag, title, text and link
Tall 4: 5 images with a gentle hover lift
Dark gallery theme by default; any preset or brand kit
Reduced motion respected; plain layout while editing
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Horizontal Scroll Gallery — Free GSAP Pinned Section

Horizontal Scroll Gallery: A gallery that turns vertical scrolling into horizontal movement. On larger screens the section pins and a row of tall image cards slides sideways as visitors scroll down, then the page carries on. Each card has a photo, a tag, a title and a line of text, and links anywhere. On phones and without JavaScript it is a swipeable row with scroll snapping.

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.

Why use it

Why Use the Horizontal Scroll Gallery

↔
A memorable moment
Sideways motion in a vertical page stops the scroll and makes a portfolio or collection feel curated.
⇣
No new gesture to learn
Visitors keep scrolling as usual; the page decides when the row moves, then hands control back.
✓
Never hides content
Every card is in the HTML and reachable by swiping, keyboard and screen readers, with or without motion.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and cards in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🎨
Studio portfolio
Show six recent projects as tall cards with a client tag, title and one line each, linking to full case studies, so visitors browse your work without leaving the page.
🛍️
Product collection
Present a seasonal collection or lookbook as a sideways row of product photos, each card linking straight to its product page with the price in the text line.
🏨
Rooms and destinations
Let hotels and travel sites slide through rooms, villas or destinations with a photo, a short description and a booking link on every card.
🍽️
Signature dishes
Restaurants can scroll through signature dishes with mouth-watering photos and a one-line description, ending with a link to the full menu and bookings.

Got questions?

Frequently Asked Questions

GSAP ScrollTrigger pins the section and moves the row of cards left in step with your vertical scrolling. The scroll length equals how far the row overflows, so it always ends exactly at the last card.

Below 768px the row stays a native swipeable row with scroll snapping, which feels more natural on touch screens than a pinned section.

Yes. All cards are ordinary links in the HTML, reachable with the keyboard and screen readers. People who prefer reduced motion get the swipeable row instead of the pinned animation.

Yes. Export it as a React or Vue component; the ScrollTrigger script is included and runs on the client. Load GSAP and ScrollTrigger from the CDN links in the export or from npm.

It saves an editable copy of your Horizontal Scroll Gallery in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.