ParallaxSlider Pro

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.

What's Included

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.

Features

• 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

Property Controls

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.

How It Works

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.

Technical Details

• 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

Default Settings

• 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

Requirements

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.

Use Cases

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