ParallaxFolio

An infinite vertical portfolio slider with parallax depth, lerp smooth scrolling, and a centered project card. Built for studios, designers, and agencies who want their work to feel alive.

What's Included

One self contained Framer code component. No third-party libraries, no external dependencies. Add it to your canvas, drop in your projects, and it works.

Features

• Infinite loop scrolling in both directions with no visible seam

• Parallax effect on both full screen background and thumbnail image

• Lerp-based motion smoothing for buttery 60fps scroll feel

• Auto-snap to the nearest project after scrolling stops

• Cross-fade transitions between project titles, categories, and descriptions

• Centered info card with fully customizable layout and typography

• Mouse wheel, click-drag, and touch gesture support

• Virtual rendering — only visible slides are in the DOM at any time

• Up to 20 projects supported

Property Controls

Projects Add up to 20 projects. Each project includes a title, image (URL or file upload), category, year, and description.

Layout Control card margin, card height, thumbnail width, card background color with opacity, and card padding using Framer's native controls.

Typography Separate font controls for number, title, category, year, and description. Each includes family, size, weight, letter spacing, line height, and text case.

Scroll Behavior Scroll Speed · Smoothness (lerp factor) · Snap Duration · Max Velocity

Image Scaling Independent parallax scale for background image and thumbnail image.

Default Settings

• 5 sample projects with placeholder images

• 192px horizontal card margin

• 240px card height · 400px thumbnail width

• White card background at 96% opacity

• Helvetica Neue · 13px · Uppercase

• 0.75 scroll speed · 0.06 smoothness · 500ms snap

Technical Details

Performance Virtual rendering keeps DOM nodes minimal regardless of project count. RequestAnimationFrame drives all animation. Refs handle DOM updates directly to avoid unnecessary re-renders. useMemo and useCallback prevent expensive recomputations on every frame.

Animation Custom lerp smoothing on scroll position. Cubic easing on snap animations. Separate parallax calculations for background and thumbnail layers. Cross-fade transitions on all text and image changes.

Input Handling Mouse wheel with velocity clamping. Click-drag with momentum carry. Touch events for mobile. Automatic snap fires after a configurable idle period.

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 showcases

• Product galleries

• Case study presentations

• Editorial layouts

• Photography collections

• Agency work reels

SEO Keywords to use in your listing description and tags:

framer parallax slider · infinite scroll framer · portfolio slider framer · parallax scroll component · framer portfolio component · vertical slider framer · framer infinite slider · smooth scroll framer · parallax gallery framer · framer marketplace slider · image slider framer · framer code component · portfolio showcase framer · framer motion slider · parallax effect framer.