57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:T109a,

About this Component

MasonryTabs is a refined, production-ready gallery component designed for creators who need organized, beautiful image displays without compromising on motion or flexibility. Each tab houses its own independent masonry gallery where images respect their natural aspect ratios — no awkward cropping, no forced uniformity.

Switching between tabs triggers a buttery-smooth staggered side-fade animation that brings each image to life, giving your visitors a sense of curated intentionality with every interaction. Every detail is controllable — from column and row counts to spacing, colors, animation timing, and scroll behavior — all through intuitive property controls. No code required after dropping it in.

Whether you're categorizing photography genres, separating project types, or building a multi-collection showcase, MasonryTabs gives your content the structure it deserves while keeping the experience fluid and modern.

Key Features

Multi-Tab Navigation — Organize content across multiple customizable tabs with clean, minimal tab styling and smooth active-state transitions.
True Masonry Layout — Images auto-adapt to their natural height, creating an organic, Pinterest-style grid that feels intentional and balanced.
Staggered Side-Fade Animations — Each image animates in with a subtle horizontal fade when its tab becomes active, creating a cinematic reveal effect.
Flexible Grid Controls — Adjust column count, row count, gap spacing, and border radius per your exact design needs.
Dynamic Image Management — Add or remove images per tab effortlessly through property controls — the gallery gracefully adapts to any count.
Built-in Scroll Handling — Galleries that exceed the set height become smoothly scrollable, with customizable max-height controls.
Fully Responsive — Columns intelligently reduce on smaller breakpoints, and tabs wrap naturally on mobile — pixel-perfect at every screen size.
Complete Style Customization — Control background colors, tab colors, active indicators, text styling, image hover effects, padding, and more.

Perfect For

Photography portfolios with categorized collections
Agency websites showcasing work by type or client
Product galleries organized by category or season
Design portfolios separating UI, branding, and illustration
Architecture & interior design showcases by project
Any multi-collection visual display that needs structure and elegance

Property Controls at a Glance

| Control | Description | |---|---| | Tab Count | Set number of tabs (2–8) | | Tab Labels | Customize each tab's display name | | Images Per Tab | Upload and manage images independently per tab | | Columns | Adjust grid columns (1–6) | | Gallery Max Height | Set scrollable threshold | | Gap & Border Radius | Fine-tune spacing and image rounding | | Animation Duration | Control fade-in speed and stagger delay | | Tab Styling | Colors, fonts, active indicators | | Background Colors | Component, tab bar, and gallery backgrounds | | Hover Effect | Toggle subtle scale or dim on image hover |

Why MasonryTabs?

Most gallery components force you to choose — tabs or masonry, animation or performance, beauty or control. MasonryTabs refuses that compromise. It's the gallery component you drop in once and never need to replace.

Clean. Animated. Organized. Yours.

54:[["$","$L57",null,{"post":{"id":"019e60a4-8752-7dbf-9e47-c902ce65e1ff","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c910167b-6860-41f5-94ce-a3ad7d7777fb","name":"xtremely Unusual","slug":"xtremely-unusual","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c910167b-6860-41f5-94ce-a3ad7d7777fb/yvy0zzn9","followed":false,"followsYou":false},"media":[],"resources":[{"id":"FGDjpwGVoIdREnfqR91C","resolved":true,"title":"MultiTabMasonry","body":"$58","bodyJson":null,"introduction":"Multi-tab masonry gallery with staggered","slug":"multitabmasonry","author":{"framerUserId":"c910167b-6860-41f5-94ce-a3ad7d7777fb","name":"xtremely Unusual","slug":"xtremely-unusual","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c910167b-6860-41f5-94ce-a3ad7d7777fb/yvy0zzn9","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/uQXniot12TaPxYaBiKbf/multitabmasonry-IXhLIJgohWNM8uuG0jguycMkeVVoT4","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-12T12:52:08.535Z","updatedAt":"2026-05-25T19:35:01.504Z","publishedAt":"2026-05-25T19:37:35.826Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://masonrytabs.framer.website/","price":"10","paymentUrl":"https://flutterwave.com/pay/multitabmasonry","workshop":true,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"sdvZkCt18VKRSx4isV3R","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-25T19:37:35.826Z","updatedAt":"2026-05-25T19:37:35.826Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you