---
title: "Image Comparator — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Riduan Amar · Carousels. ✨ Image Comparator — A fully-featured before/after slider for Framer."
canonical: "https://framer.elliotli.dev/component/image-comparator"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Image Comparator

# Image Comparator

Compare images with 5 interaction modes.

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

![Image Comparator preview image 1](https://framer.elliotli.dev/og/component/image-comparator/c9c7ebe553e6b47a/1600x1200.jpg)

## Summary

✨ Image Comparator — A fully-featured before/after slider for Framer.

## Description

✨ **Image Comparator** — A fully-featured before/after slider for Framer. Drop it on your canvas, set your two images, and choose how your users interact with the comparison.

## Interaction Modes

**5 Interaction Modes** available — each built for a different use case:

-   **Drag** — classic slider, follows the cursor or finger
    
-   **Hover** — reveals on mouse position, no click needed
    
-   **Toggle** — click to switch between the two images
    
-   **Reveal** — auto-reveals with a cinematic transition on click or hover
    
-   **Scrub** — position is driven by the scroll position on the page
    

## Many options

**4 Split Directions** — Horizontal, Vertical, Diagonal TL→BR, Diagonal BL→TR

**7 Reveal Transitions** — Fade, Flip Horizontal, Flip Vertical, Zoom, Slide Left, Slide Right, Blur

**Auto-play** — configurable animation duration, easing (Ease In-Out, Ease Out, Linear, Spring), and pause between cycles

**Full visual control** — handle shape (Circle, Square, or line only), color, size, line thickness, corner radius, and 5 aspect ratios (16:9, 4:3, 1:1, 3:4, 9:16)

**Image labels** — optional Before / After captions, individually customizable

**Overrides file included** — control any prop dynamically from buttons, selects, or sliders on your canvas, with no code required beyond applying the override

**Accessible & SSR-safe** — keyboard navigable, configurable aria-label, works with Framer's static publish

After your purchase, you will receive a link to the Component URL. Copy it and paste it directly onto your Framer canvas to get started.

## Support

**Component Support includes:**

-   Availability of the author to answer questions
    
-   Answering technical questions about item's features
    
-   Assistance with reported bugs and issues
    

**Support response time can be up to 2 business days.**

**Email address:** [**support@hikariweb.io**](mailto:support@hikariweb.io)

## Refund Policy

If you're not satisfied with your purchase, you may request a refund within 7 days of purchase by emailing [support@hikariweb.io](mailto:support@hikariweb.io).

Refunds will be processed within 14 days of your refund request.

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

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

-   All · #8790

## Details

- **Author**: Riduan Amar
- **Price**: $5.00
- **Published**: 2026-06-09
- **Updated**: 2026-06-07
- **Added**: 2026-05-30
- **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