---
title: "Parallax Image Slide — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Aidan Looker · Interactive. What is Parallax Image Slide?"
canonical: "https://framer.elliotli.dev/component/parallax-image-slide"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Parallax Image Slide

# Parallax Image Slide

Before-and-after image comparison

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

![Parallax Image Slide preview image 1](https://framer.elliotli.dev/og/component/parallax-image-slide/52a991aad1b68473/1600x1200.jpg)

## Summary

What is Parallax Image Slide?

## Description

## What is Parallax Image Slide?

Parallax Image Slide is a premium before-and-after image comparison component with built-in parallax depth, spring physics, and three orientation modes. Use it to showcase renovations, design transformations, retouching work, product upgrades, or any visual comparison. Supports drag and hover interactions, six handle designs, and a unique diagonal split mode.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Three orientation modes — horizontal, vertical, and diagonal — with adjustable diagonal angle and an optional fit-to-bounds toggle
    
-   Built-in parallax effect that creates convincing depth as the divider moves across both images
    
-   Physics-based drag interaction with configurable friction, bounce, stiffness, and damping for a tactile, responsive feel
    
-   Six handle designs (Arrows, Grip, Diamond, Minimal, Line, None) and three divider styles (Sharp, Glow, None) for complete visual control
    
-   Edge tension effect that adds elastic resistance at the slider boundaries
    
-   Responsive image support with independent position controls for each image
    

## Controls inside Framer

### Essential

-   Before Image
    
-   After Image
    
-   Start Position
    
-   Orientation (Horizontal, Vertical, Diagonal)
    
-   Interaction (Drag, Hover)
    
-   Divider Style (Sharp, Glow, None)
    
-   Handle Design (Arrows, Grip, Diamond, Minimal, Line, None)
    
-   Diagonal Angle (visible for Diagonal orientation)
    
-   Fit to Bounds (visible for Diagonal orientation)
    

### Physics (visible for Drag interaction)

-   Friction
    
-   Bounce
    
-   Stiffness
    
-   Damping
    

### Colors

-   Handle
    
-   Handle Glow
    
-   Handle Border
    
-   Divider
    
-   Label BG
    
-   Label Text
    

### Effects

-   Parallax toggle and depth
    
-   Edge Tension toggle and amount
    

### Appearance

-   Border Radius
    
-   Handle Size
    
-   Divider Width
    

### Overlays

-   Show Labels toggle
    
-   Before Text
    
-   After Text
    
-   Label Position (Top, Bottom)
    
-   Show Progress toggle
    

### Fonts

-   Label Font
    
-   Hint Font
    

### Hint

-   Show Hint toggle
    
-   Hint Text
    

## Best use cases

-   Portfolio sites showcasing design, retouching, or illustration work side by side
    
-   Real estate and renovation pages comparing before-and-after property photos
    
-   Product landing pages highlighting feature upgrades or visual improvements
    
-   Case studies and agency decks demonstrating measurable transformation results
    

Ship interactive image comparisons in seconds — just drop, configure, and publish.

## Questions or custom requests?

-   We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au).
    

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

-   All · #11282

## Details

- **Author**: Aidan Looker
- **Price**: $12.00
- **Published**: 2026-02-26
- **Updated**: 2026-06-13
- **Added**: 2026-02-22
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step