---
title: "Glide Gallery — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Abhrajit Ray · Galleries. Infinite-scroll isometric card gallery"
canonical: "https://framer.elliotli.dev/component/glide-gallery"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/Glide Gallery

# Glide Gallery

Infinite-scroll isometric card gallery

[View on Framer](https://framer.com/marketplace/components/glide-gallery/?via=elliot-li)

![Glide Gallery preview image 1](https://framer.elliotli.dev/og/component/glide-gallery/ea0571958b0c5d3b/1600x1200.jpg)

## Summary

Infinite-scroll isometric card gallery

## Description

## Why it works:

Image walls usually sit flat and still. Tilting the grid in 3D and putting it on a soft horizontal sweep turns a portfolio or product gallery into something that moves at the right pace for a hero. Present, but not asking for your full attention.

### Under the hood:

\- Cards live in a CSS grid that's rotated on X and Z, so the whole plane reads as receding into the canvas.

\- Vertical scroll is a single offset advanced per frame; the grid duplicates so it loops seamlessly.

\- Each card's horizontal position and Y-axis rotation come from \`sin(phase)\` and \`cos(phase)\`, where phase is derived from its position in the loop.

\- Drag updates velocity directly; on release, velocity eases back toward the autoplay target so the motion never jerks.

\- Cards outside a cull radius around the visible center get skipped each frame.

### Best for:

\- Portfolio and case-study sites

\- Photography, fashion, and lifestyle brands

\- Music album and editorial pages

\- Product galleries and lookbooks

\- Studio and agency homepages

### Controls:

\- **Images**: array of image URLs (falls back to a built-in set if empty)

\- **Columns**: grid column count (1–8)

\- **Card Size**: width of each card in px (60–400)

\- **Gap**: spacing between cards in px (0–120)

\- **Autoplay**: scroll on its own when not being dragged

\- **Speed**: autoplay scroll rate (-10 to 10, negative reverses)

\- **Curve**: amplitude of the sine sweep in px (0–1500)

\- **Perspective**: CSS perspective in px (500–3000)

\- **Tilt X**: forward/back tilt in degrees (-90 to 90)

\- **Tilt Z**: roll tilt in degrees (-90 to 90)

### Built for production:

Plain CSS 3D transforms with a single \`requestAnimationFrame\` loop, no animation library. Auto-pauses when scrolled offscreen via \`IntersectionObserver\`. Pointer events handle drag on both mouse and touch with \`touchAction: none\` so it doesn't fight page scroll. Cards outside the visible band are skipped each frame.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10123

## Details

- **Author**: Abhrajit Ray
- **Price**: $5.00
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-05-11
- **Categories**: Galleries

## More like this

-   [Infinite Pan Canvas](/component/infinite-pan-canvas) — Aisol Studio · $15 — Endless image wall you can drag
-   [CMS Photo Pile](/component/cms-photo-pile) — Marso Angelov · $10 — Draggable Photo Gallery
-   [CMS Infinity Grid](/component/cms-infinity-grid) — 55N · Free — Boundless exploration.
-   [Endless CMS Reel](/component/endless-cms-reel) — Marso Angelov · $10 — Horizontal Momentum Gallery