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:T78e,

About this Component

Create an immersive scroll-driven gallery where images and videos fly through 3D space before a selected final visual expands to fill the viewport.

Built for smooth, cinematic storytelling, the component combines scroll-linked depth movement with subtle cursor parallax while keeping everything customizable directly inside Framer.

Perfect For

• Creative portfolios • Case studies & project showcases • Photography & fashion websites • Product launches • Editorial experiences • Immersive landing pages

Key Features

• Scroll-driven 3D media animation • Supports both images and videos • Choose any media item as the final reveal • Two cursor parallax styles • Adjustable card width & height • Separate mobile sizing controls • Custom spread & perspective • Adjustable speed, stagger & depth • Start & end scroll offsets • Cover / Contain media fitting • Custom background & final overlay • Optimized static rendering & performance

How It Works

Place the component inside a 100vh sticky frame, then place that frame inside a taller scroll container. The animation automatically follows the available scroll distance.

Add your media, choose the final item, then customize the layout, motion, depth and parallax directly from the Framer property panel.

Questions?

Need help setting it up? Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final. Refunds are only available for confirmed critical technical issues that prevent the component from functioning as described and cannot be resolved. Refunds are not provided for buyer’s remorse, aesthetic preferences, or custom modification requests. Issues must be reported with supporting evidence within 14 days of purchase.

5a:[["$","$L5d",null,{"post":{"id":"01a0fba0-0a67-7513-a20e-dc7018fe6d84","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":"RszTPBET0YM0yheMCrL0","resolved":true,"title":"Depth Flow 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":"Create an immersive scroll-driven gallery where images and videos fly through 3D space before a selected final visual expands to fill the viewport."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for smooth, cinematic storytelling, the component combines scroll-linked depth movement with subtle cursor parallax while keeping everything customizable directly inside Framer."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Case studies & project showcases • Photography & fashion websites • Product launches • Editorial experiences • Immersive landing pages"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Scroll-driven 3D media animation • Supports both images and videos • Choose any media item as the final reveal • Two cursor parallax styles • Adjustable card width & height • Separate mobile sizing controls • Custom spread & perspective • Adjustable speed, stagger & depth • Start & end scroll offsets • Cover / Contain media fitting • Custom background & final overlay • Optimized static rendering & performance"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Place the component inside a 100vh sticky frame, then place that frame inside a taller scroll container. The animation automatically follows the available scroll distance."}]},{"type":"paragraph","content":[{"type":"text","text":"Add your media, choose the final item, then customize the layout, motion, depth and parallax directly from the Framer property panel."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting it up? 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":"All sales are final. Refunds are only available for confirmed critical technical issues that prevent the component from functioning as described and cannot be resolved. Refunds are not provided for buyer’s remorse, aesthetic preferences, or custom modification requests. Issues must be reported with supporting evidence within 14 days of purchase."}]}]},"introduction":"Scroll-driven 3D media gallery","slug":"depth-flow-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/01a0fb9f-f7f7-70a0-aac6-3c999ac10690.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T07:59:24.163Z","updatedAt":"2026-10-02T07:59:24.163Z","publishedAt":"2026-10-02T07:59:24.160Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://satisfied-clarity-533238.framer.app","price":"12","paymentUrl":"https://contra.com/payment-link/vpZ2jyh0-depth-flow-gallery-scroll-driven-3-d-media-gallery","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"fy611yNm9VKwQoQvSu5F","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-02T07:59:24.775Z","updatedAt":"2026-10-02T07:59:24.775Z","reported":false}}],"$L5f"]

Suggested for you