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.
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.
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
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.
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
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.
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 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
Hamim Reza
