5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:Tbe3,

About this Component

The Scroll Grid Gallery component creates a cinematic scroll-driven reveal effect for your Framer projects. An adaptive hero image smoothly shrinks into a grid cell while surrounding tiles scale and fade in from the center outward - transforming a single featured image into a complete 5×3 image grid, all driven by the user's scroll position.

Key Features

- Scroll-Driven Cinematic Animation - As the user scrolls, an adaptive hero image smoothly shrinks into a grid cell while surrounding tiles scale and fade in layer by layer - from center outward. Three animation layers reveal sequentially with staggered timing and custom cubic-bezier easing, creating a polished, cinematic transition from a single image to a full 5×3 grid.

- Fully Responsive - On desktop the component displays a complete 5-column by 3-row grid with all three animation layers. On mobile (≤ 600px) it automatically collapses to 3 columns, hiding the outermost layer for a cleaner layout. It also respects the prefers-reduced-motion setting, showing a static grid when the user has motion disabled.

- Easy Customization - Everything is controlled through the Framer properties panel: upload images or paste URLs for each layer, set background color, grid width (400–3000 px), gap spacing, border radius, and scroll length (150–500 vh) to speed up or slow down the animation. Default Unsplash images are included, so the component works immediately after adding it to your project.

How to Set Up

1. Drag & Drop the Scroll Grid Gallery component onto your canvas in Framer.

3. Replace the default images by uploading your own or pasting image URLs for each layer (center, inner columns, outer edges).

4. Adjust the Scroll Length to control how fast or slow the animation plays during scroll.

5. Customize appearance settings - background color, grid width, gap, and border radius.

6. Preview your project to see the scroll animation in action (the effect is only visible in preview/published mode, not on the canvas).For more details on installation and component properties, please refer to the documentation - https://docs.zeroqode.com/framer-plugins/scroll-grid-gallery

Perfect For

- Portfolio and photography showcases with a cinematic first impression

- Landing pages that need a visually striking hero-to-gallery transition

- Creative agency websites looking for scroll-based storytelling

- Product galleries that reveal items in an engaging, layered sequence

- Any project where you want to wow visitors with scroll-driven motion

Support

💬 For any questions, feel free to contact us at this support email: support@zeroqode.com

59:[["$","$L5c",null,{"post":{"id":"019e63ac-5b73-72a2-b313-69a63878c115","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"5f5e219b-8257-4212-85a8-db6dd719febe","name":"Zeroqode","slug":"zeroqode","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/183716/logo-icon-BG-circle%20copy-IauPYu9ntfHlHHY38w8OXzpiTpJ8Uw.png","followed":false,"followsYou":false},"media":[],"resources":[{"id":"kjYtVtBC14KBWO6TJnOW","resolved":true,"title":"Scroll Grid Gallery","body":"$5d","bodyJson":null,"introduction":"Cinematic scroll grid animation","slug":"scroll-grid-gallery","author":{"framerUserId":"5f5e219b-8257-4212-85a8-db6dd719febe","name":"Zeroqode","slug":"zeroqode","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/183716/logo-icon-BG-circle%20copy-IauPYu9ntfHlHHY38w8OXzpiTpJ8Uw.png","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/kjYtVtBC14KBWO6TJnOW/scroll-grid-gallery-UsRfeyZtdscsa81fV03QOL91e17eQH","metadata":{"tint":"hsl(0 0% 3%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-05-19T18:47:04.537Z","updatedAt":"2026-06-08T14:53:42.482Z","publishedAt":"2026-05-26T09:45:00.531Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://smart-dragon-854875.framer.app/","price":"5","paymentUrl":"https://buy.stripe.com/eVq3cv0EL3JB6wb4SN8og0j","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"YNx1iQFje6HHiFBhF4li"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-26T09:45:00.531Z","updatedAt":"2026-05-26T09:45:00.531Z","reported":false}}],"$L5e"]

Suggested for you