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"] 5f:I[539959,["/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"],"CommentSection"] 5e:T669,

Scroll Zoom Gallery is a scroll-driven animation component built with smooth motion scaling and layered image positioning. It creates a cinematic zoom effect by dynamically transforming multiple images at varying intensities as the user scrolls.

Key Features

7 customizable image slots
Smooth, scroll-based scaling animation
Layered depth effect with controlled overlap
Adjustable scroll height multiplier
Fully responsive (Desktop, Tablet, Mobile)
Optimized viewport scaling for smaller screens
Performance-focused animation using spring smoothing
Clean and minimal structure for easy integration

Responsive Behavior

The component intelligently adapts layout proportions and viewport height calculations across devices. On tablet and mobile, scaling and positioning are adjusted to maintain visual balance and prevent overflow, ensuring the center image expands cleanly without revealing background layers unintentionally.

Customization

Replace images directly from property controls
Modify scroll duration via height multiplier
Toggle layout guides for alignment preview
Easily tweak scale intensity inside the code

Best Used For

Portfolio showcases
Creative case studies
Agency landing pages
Product highlights
Modern storytelling layouts

Scroll Zoom Gallery combines precision motion design with responsive structure, making it ideal for projects that demand both visual impact and refined user experience.

5a:[["$","$L5d",null,{"post":{"id":"019ca302-5e61-77ab-a225-eb9fd4a058c6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0cde0594-dfae-4cc3-9cb0-225330b10106","name":"The Codejuring Universe","slug":"the-codejuring-universe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1101484/avatar-Spy0JOaDaGi7udDQkKgWJPsHuOYo1d.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"g0hAbJTK123ntHuUlFLe","resolved":true,"title":"Scroll Scale Gallery","body":"$5e","bodyJson":null,"introduction":"Scroll. Scale. Immerse.","slug":"scroll-scale-gallery","author":{"framerUserId":"0cde0594-dfae-4cc3-9cb0-225330b10106","name":"The Codejuring Universe","slug":"the-codejuring-universe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1101484/avatar-Spy0JOaDaGi7udDQkKgWJPsHuOYo1d.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/g0hAbJTK123ntHuUlFLe/scrollscalegallery-Mwvu8rAXauY5ge8lGkNV17FU2BesAe","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-17T10:12:41.027Z","updatedAt":"2026-02-27T18:13:56.500Z","publishedAt":"2026-02-28T06:49:27.393Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://various-discipline-428789.framer.app/","price":"8","paymentUrl":"https://contra.com/payment-link/P4MFiLaX-scroll-zoom-gallery-custom-framer-component","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"iUkKQnUx2gxzhTxj5rLx","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-28T06:49:27.393Z","updatedAt":"2026-02-28T06:49:27.393Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019ca302-5e61-77ab-a225-eb9fd4a058c6"},"postId":"019ca302-5e61-77ab-a225-eb9fd4a058c6","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you