5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T999,

About this Component

Scroll Grid Gallery is an immersive scroll-driven image gallery built for portfolios, project showcases, photography, and editorial websites.

As you scroll, layered images move through the viewport with depth and parallax before a featured image expands across the screen. The surrounding gallery cards spread outward during the transition, creating a cinematic handoff into the final full-screen image reveal.

Perfect For

Portfolio and case study pages
Photography websites
Creative studios and agencies
Editorial layouts
Project and work showcases

Key Features

Scroll-driven gallery animation
Expanding featured image
Responsive desktop and mobile layouts
Smooth mouse parallax on desktop
Smooth image hover interaction
Upload up to 19 gallery images
Separate featured image control
Adjustable scroll distance and smoothing
Custom expansion timing, height, and grid spread
Full typography control including size, weight, line height, and letter spacing
Custom background, title color, shadow, and breakpoint
Canvas preview progress control
Reduced-motion support

How It Works

Add your gallery images and featured image, then customize the typography, colors, scroll timing, expansion height, grid spread, and interaction settings directly from Framer’s property panel.

The component creates its own scroll distance and uses a sticky viewport stage for the animation. Keep parent Overflow set to Visible for the sticky behavior to work correctly.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

This is a non-tangible digital product. All sales are final.

Refunds are only considered for confirmed critical technical failures that prevent the component’s core functionality and cannot be reasonably resolved through support.

Refunds are not provided for buyer’s remorse, aesthetic preferences, customization requests, or modifications made after purchase.

Any technical issue must be reported within 14 days of purchase with supporting evidence.

5a:[["$","$L5d",null,{"post":{"id":"01a0f9dc-aee9-7594-be1a-a85300da1127","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"dNUWRJrMD8gqJhd1mgMi","resolved":true,"title":"Work Vision Gallery","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Scroll Grid Gallery is an immersive scroll-driven image gallery built for portfolios, project showcases, photography, and editorial websites."}]},{"type":"paragraph","content":[{"type":"text","text":"As you scroll, layered images move through the viewport with depth and parallax before a featured image expands across the screen. The surrounding gallery cards spread outward during the transition, creating a cinematic handoff into the final full-screen image reveal."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and case study pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative studios and agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Project and work showcases"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven gallery animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Expanding featured image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive desktop and mobile layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth mouse parallax on desktop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth image hover interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload up to 19 gallery images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Separate featured image control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable scroll distance and smoothing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom expansion timing, height, and grid spread"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full typography control including size, weight, line height, and letter spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom background, title color, shadow, and breakpoint"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas preview progress control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Add your gallery images and featured image, then customize the typography, colors, scroll timing, expansion height, grid spread, and interaction settings directly from Framer’s property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"The component creates its own scroll distance and uses a sticky viewport stage for the animation. Keep parent Overflow set to "},{"type":"text","text":"Visible","marks":[{"type":"bold"}]},{"type":"text","text":" for the sticky behavior to work correctly."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}},{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"This is a non-tangible digital product. All sales are final."}]},{"type":"paragraph","content":[{"type":"text","text":"Refunds are only considered for confirmed critical technical failures that prevent the component’s core functionality and cannot be reasonably resolved through support."}]},{"type":"paragraph","content":[{"type":"text","text":"Refunds are not provided for buyer’s remorse, aesthetic preferences, customization requests, or modifications made after purchase."}]},{"type":"paragraph","content":[{"type":"text","text":"Any technical issue must be reported within 14 days of purchase with supporting evidence."}]}]},"introduction":"A cinematic scroll-driven gallery","slug":"work-vision-gallery","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0f9dc-3edc-77b9-9e8d-c1808c25cce0.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-01T23:46:23.993Z","updatedAt":"2026-10-01T23:55:13.166Z","publishedAt":"2026-10-01T23:46:23.985Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://zestful-alpaca-450230.framer.app","price":"12","paymentUrl":"https://contra.com/payment-link/jVs5VMGH-scroll-grid-gallery-a-cinematic-scroll-driven-gallery","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"pI7fMGsgxU6AU4GUqtys","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-01T23:46:24.617Z","updatedAt":"2026-10-01T23:46:24.617Z","reported":false}}],"$L5f"]

Suggested for you