---
title: "MasonFilter — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Nirav Jivani · Galleries. Filterable masonry with lightbox"
canonical: "https://framer.elliotli.dev/component/masonfilter"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/MasonFilter

# MasonFilter

Filterable masonry with lightbox

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

![MasonFilter preview image 1](https://framer.elliotli.dev/og/component/masonfilter/f0bedaa99436a1e7/1600x1200.jpg)

## Summary

Filterable masonry with lightbox

## Description

A production-ready, no-code masonry grid for portfolios, galleries and case-study walls. Cards of any height pack tightly with true shortest-column-first logic, then reflow with smooth animation as visitors filter and sort.

**Masonry**

-   Per-item aspect ratio for varying heights
    
-   Adjustable gap
    

**Responsive**

-   Auto (min column width) or Breakpoints mode
    
-   Separate Desktop / Tablet / Mobile column counts
    
-   Custom breakpoints; adapts to any width
    

**Filtering**

-   Toggle the filter bar
    
-   Multi-category tags an item can live in several filters
    
-   Add, remove and reorder filter buttons
    
-   Editable Filter / All labels
    
-   Default: Branding, Web, Photography, Illustration, 3D
    

**Sorting**

-   Toggle the sort bar
    
-   Add, remove and reorder sort buttons
    
-   Presets: Featured, Name A–Z, Name Z–A, Newest, Oldest, Category
    
-   Per-item Number powers Newest / Oldest
    

**Animation**

-   FLIP-style reflow on every filter and sort
    
-   Adjustable duration
    
-   Six easings: Ease Out, In-Out, Spring, Linear, Circ Out, Back Out
    
-   Stagger for a cascade
    

**Lightbox**

-   Click action: Lightbox / Open Link / None
    
-   Fullscreen viewer, prev/next scoped to filtered items
    
-   Keyboard nav (arrows + Esc)
    
-   Toggle arrows, counter, caption; loop
    
-   Custom backdrop, control, caption colors and radius
    

**Per item**

-   Responsive image (srcSet), title, subtitle
    
-   Multi-select categories, number, aspect ratio, background, link
    

**Card styling**

-   Radius, background, optional shadow
    
-   Text on image or below
    
-   Show/hide title and subtitle
    
-   Title/subtitle color, size and font; text padding
    
-   Hover scale and lift
    

**Toolbar styling**

-   Alignment: Left / Center / Right / Spread
    
-   Bar gap and gap to grid
    
-   Label color; button radius, padding, font size
    
-   Active and idle colors
    
    Filterable, sortable masonry with true column packing, animated reflow, a fullscreen lightbox and full styling control responsive and no-code.
    
    masonry, gallery, portfolio, grid, lightbox, sortable, responsive, photography, animated
    

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

-   All · #8118

## Details

- **Author**: Nirav Jivani
- **Price**: $10.00
- **Published**: 2026-07-14
- **Updated**: 2026-09-16
- **Added**: 2026-07-14
- **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