5e:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3q5d1avmchlp0.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/149w-u4or12up.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/17pioewhhzr_j.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/3fr1ev83fgwky.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js"],"PostDetailCard"] 5f:T1088,

Tutorial

Tutorial for Infinite ImageScroll

Details

Infinite ImageScroll is the ultimate nested image component for Framer. Create mesmerizing, infinitely nested image sequences that zoom deeper with every scroll. Upload your sequence of images and watch as each one seamlessly reveals the next in a hypnotic, continuous animation. Comes with two scroll modes (Normal & Endless) which lets you add this effect to one section of a page that cycles once and then continues scrolling to the next section of your page or Endless to have the effect take up an entire page. Designed with smooth spring physics, Infinite ImageScroll brings captivating visual storytelling to your website. Perfect for creating unique, memorable user experiences that keep visitors engaged.

🖱️ Pick between two scroll modes (Normal and Endless) to add this effect for one section of a page (Normal) or for an entire page (Endless).

Normal Mode - Scrolls through all images once, then releases scroll control to page
Endless Mode - Loops infinitely through your image sequence for continuous exploration

Features

Scroll-driven animation - Natural wheel/trackpad scrolling controls the zoom depth
Infinite nesting effect - Each image contains and reveals the next one nested inside
Two scroll modes: Normal (one complete cycle) or Endless (infinite looping)
Smooth spring physics - Customizable spring stiffness and damping for fluid motion
Upload multiple images - Support for image sequences of any length
Canvas-based rendering - High-performance animation using HTML5 canvas
Responsive-ready - Images automatically scale and crop to fill the frame
Mobile optimized - Works seamlessly on touch devices

Customizations

Scroll Mode Toggle - Switch between Normal (single cycle) and Endless (infinite loop)
Spring Stiffness - Adjust scroll smoothness (50-300, higher = snappier response)
Spring Damping - Control scroll resistance (10-100, higher = less bounce)
Alt text for images - Accessibility-friendly labeling for each layer

Technical Highlights

Spring-based animation - Powered by Framer Motion for buttery-smooth transitions
Image preloading - All images load before animation begins for seamless playback
Responsive resize handling - Maintains aspect ratio and quality at any viewport size

Great for:

Creative portfolios - Showcase work in an unforgettable way
Photography galleries - Create dream-like sequences of related images
Product launches - Build anticipation with progressive reveals
Storytelling websites - Guide users through visual narratives
Art installations - Digital galleries with mesmerizing depth
Brand experiences - Stand out with unique, interactive presentations
Concept explorations - Present ideas that unfold layer by layer
Architectural visualizations - Show spaces from macro to micro perspectives

5b:[["$","$L5e",null,{"post":{"id":"019b2daf-9667-7344-9b95-6faddcb327bf","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7d10eb1d-731b-48d4-846c-ebb2274ac644","name":"Netbloom","slug":"netbloom","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31476/p9WbJQQvm-0BJOmC9RzfkIULrudhkRCdg0HslxiM","followed":false,"followsYou":false},"media":[],"resources":[{"id":"bDs8WS4U1T8J33w4Z1Eh","resolved":true,"title":"Infinite ImageScroll","body":"$5f","bodyJson":null,"introduction":"Mesmerizing, endless image scroll effect","slug":"infinite-imagescroll","author":{"framerUserId":"7d10eb1d-731b-48d4-846c-ebb2274ac644","name":"Netbloom","slug":"netbloom","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31476/p9WbJQQvm-0BJOmC9RzfkIULrudhkRCdg0HslxiM","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/bDs8WS4U1T8J33w4Z1Eh/infinite-imagescroll-JfU1mZVNYxJdyL7ifWKJickKUFwSpB","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-09T08:56:11.410Z","updatedAt":"2026-03-18T04:54:36.870Z","publishedAt":"2025-12-17T19:00:40.679Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://infiniteimagescroll.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_uUTcm0bVKsl4IGd1smITJQRWWXDMKnfg1zxd93F7gZm","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"9gupNDI3FuxM7cJR0BxS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-17T19:00:40.679Z","updatedAt":"2025-12-17T19:00:40.679Z","reported":false}}],"$L60"]

Suggested for you