---
title: "SideShift — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Abdul Mateen · Interactive. Before/After image Slider"
canonical: "https://framer.elliotli.dev/component/sideshift"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/SideShift

# SideShift

Before/After image Slider

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

![SideShift preview image 1](https://framer.elliotli.dev/og/component/sideshift/43db0fc299a59020/1600x869.jpg)

## Summary

Before/After image Slider

## Description

## Before / After Image Comparison

A smooth, interactive before-and-after image slider for showcasing transformations, redesigns, retouching, renovations, and visual comparisons.

Drag the handle horizontally to reveal the before and after states with responsive spring-based motion. The component is fully customizable through Framer’s property controls, so you can easily adjust the images, slider position, colors, handle size, line thickness, and animation feel without touching the code.

### Features

-   Smooth drag-to-compare interaction
    
-   Spring physics for responsive, natural movement
    
-   Click anywhere on the slider to reposition it
    
-   Custom before and after images
    
-   Adjustable initial slider position
    
-   Customizable divider line color and thickness
    
-   Customizable drag handle color and diameter
    
-   Adjustable spring stiffness and damping
    
-   Responsive to any frame size
    
-   Accessible slider semantics and image labels
    
-   No setup or external configuration required
    

Perfect for **design transformations, photo retouching, architecture and renovations, UI redesigns, case studies, portfolios, and product showcases**.

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

-   All · #1539

## Details

- **Author**: Abdul Mateen
- **Price**: $3.00
- **Published**: 2026-09-07
- **Updated**: 2026-09-27
- **Added**: 2026-09-07
- **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