---
title: "ParallaxFolio — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Hamim Reza · Text. Infinite parallax slider with auto snap"
canonical: "https://framer.elliotli.dev/component/parallaxfolio"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ParallaxFolio

# ParallaxFolio

Infinite parallax slider with auto snap

[View on Framer](https://framer.com/marketplace/components/parallaxfolio/?via=elliot-li)

![ParallaxFolio preview image 1](https://framer.elliotli.dev/og/component/parallaxfolio/c10632ed9041964e/1600x1200.jpg)

## Summary

Infinite parallax slider with auto snap

## Description

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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-zztf83xv-s0L8cOnI3rw3EOFloJQighfHfYO0hb)

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4434

## Details

- **Author**: Hamim Reza
- **Price**: $15.00
- **Published**: 2026-03-02
- **Updated**: 2026-04-27
- **Added**: 2026-02-21
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing