An infinite vertical image slider with parallax depth, silky lerp-smooth scrolling, and a live minimap preview. Built for portfolios, product showcases, and visual storytelling that demands more than a static grid.
One self-contained Framer code component. No third-party libraries, no external dependencies. Add it to your canvas, connect your images, and it works instantly.
Infinite loop scrolling in both directions with no visible seam
Parallax effect — images move at 20% of scroll speed creating real depth
Lerp-based motion smoothing for buttery 60fps scroll animation
Auto-snap to the nearest image after scrolling stops
Live minimap preview thumbnail showing the next upcoming image
Toggle minimap on or off with a single prop
Mouse wheel, click-drag, and touch gesture support
Virtual rendering — only visible images are in the DOM at any time
Up to 20 images supported
Scroll Behavior Fine-tune exactly how the slider feels to use.
Scroll Speed — how fast scrolling responds to input (0.1–3)
Smoothness — lerp factor controlling motion lag (0.01–0.5)
Snap Duration — animation time for snapping to an image (100–2000ms)
Max Velocity — caps maximum scroll speed to prevent over-flicking (20–500)
Visual Controls Dial in the parallax intensity and minimap size.
Show Minimap — toggle the preview thumbnail on or off
Minimap Width — thumbnail width from 40px to 300px
Minimap Height — thumbnail height from 100px to 600px
Image Scale — main image parallax scale factor (1–3)
Minimap Image Scale — minimap thumbnail scale factor (1–3)
Content Add up to 20 images via URL or direct Framer Asset upload.
Infinite Loop Images repeat endlessly in both directions using modulo arithmetic. There are no clones or duplicated DOM nodes — just clean index wrapping.
Parallax Engine Each image is scaled beyond its container and translated vertically at 20% of scroll speed. As you scroll, the image reveals different portions of the frame, creating genuine depth without CSS hacks.
Lerp Smoothing Every frame, the rendered scroll position moves a fraction of the distance toward the target position. This creates the characteristic ease-out feel that makes the slider feel premium and physical.
Auto-Snap After 100ms of no scroll input, the component calculates the nearest image center and animates smoothly to it using cubic easing. Snap duration is fully configurable.
Minimap Preview A fixed thumbnail panel shows the next upcoming image in real time. As the active index changes, the minimap updates instantly — giving users a clear sense of what is coming next as they scroll.
Virtual Rendering Only images within the visible viewport plus a small buffer zone are rendered at any time. This keeps DOM nodes minimal and performance consistent regardless of how many images are in the array.
RequestAnimationFrame drives all animation — no CSS transitions
Custom lerp smoothing on scroll position every frame
Cubic easing on snap animations for natural deceleration
Separate refs for main images and minimap thumbnails
Modulo index mapping for true infinite looping
Prevents default wheel behavior for precise scroll control
useMemo and useCallback prevent unnecessary recomputations
Refs for DOM manipulation avoid re-renders during animation loop
5 sample images
0.75 scroll speed · 0.06 smoothness · 500ms snap duration
Minimap visible · 120px wide · 200px tall
1.3 image scale · 1.3 minimap scale
Framer Sites 2024 or later. Images must be accessible via public URL or uploaded directly as Framer Assets. External image URLs require proper CORS headers on the host server.
Portfolio galleries · Product showcases · Photography collections · Story-telling interfaces · Visual navigation systems · Image carousels · Editorial layouts
SEO Keywords
framer parallax slider · infinite image slider framer · parallax scroll framer · framer image carousel · vertical slider framer · framer infinite slider · parallax image slider · framer scroll gallery · smooth scroll framer · framer parallax component · image slider framer · framer carousel component · parallax effect framer · framer code component · infinite carousel framer
Hamim Reza
