---
title: "Scroll-Based Slider — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Natalie Walsh · Carousels. Before & After Image Slider"
canonical: "https://framer.elliotli.dev/component/scroll-based-slider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Scroll-Based Slider

# Scroll-Based Slider

Before & After Image Slider

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

![Scroll-Based Slider preview image 1](https://framer.elliotli.dev/og/component/scroll-based-slider/2a297f88bb79268e/1600x1200.jpg)

## Summary

Before & After Image Slider

## Description

Interactive before and after slider with drag and optional scroll-based reveal animations. Showcase transformations, redesigns, edits, and comparisons with smooth motion, responsive layouts, and easy customization directly inside Framer. **Scroll-Based Before & After Slider**

Create immersive before-and-after comparisons directly inside Framer with smooth drag interactions and optional scroll-driven animations.

This component allows users to compare two images by dragging a divider or automatically revealing changes as they scroll through the page. Perfect for showcasing transformations, redesigns, photo edits, case studies, product comparisons, and more.

**Features**

-   Drag-to-compare image slider
    
-   Scroll-based reveal animation
    
-   Auto-scroll functionality
    
-   Fully responsive layout
    
-   Smooth motion and transitions
    
-   Custom labels and typography
    
-   Adjustable divider styling
    
-   Custom handle icon support
    
-   Border radius control
    
-   Easy image replacement inside Framer
    
-   Clean, minimal setup
    

**Customisable Properties**

-   Scroll & Animation
    
-   Images
    
-   Divider
    
-   Handle
    
-   Labels
    
-   Styling
    

**How To Use**

1.  Add the component to your Framer project.
    
2.  Upload your before and after images.
    
3.  Customise the slider appearance and behaviour.
    
4.  Enable optional scroll-based animation.
    
5.  Publish and showcase your transformation.
    

**Refund Policy**

Due to the digital nature of this product, all sales are final, and refunds will not be issued. Please review all product details carefully before purchasing. If you have any questions or need clarification, feel free to reach out before completing your order.

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

-   All · #2698

## Details

- **Author**: Natalie Walsh
- **Price**: $7.00
- **Published**: 2026-08-06
- **Updated**: 2026-10-30
- **Added**: 2026-08-06
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow