BeforeAfter Reveal: Premium Carousels Component by Qasid Hussain

Create stunning before/after image comparisons with a smooth draggable slider. Fully customizable with horizontal & vertical modes, animated handle, divider styling, cursor controls, responsive interactions, and no-code setup for Framer projects.

About this Component

Interactive Before/After Comparison

Create stunning side-by-side image comparisons with a draggable slider that reveals transformations in real time. Perfect for UI redesigns, photo editing, branding projects, renovations, and portfolio showcases.

Features

Horizontal & vertical comparison modes
Smooth draggable divider interaction
Custom divider color, width & shadow
Optional animated circular handle
Adjustable initial slider position
Multiple cursor interaction styles
Smooth follow animation support
Fully responsive on all screen sizes
Click anywhere to reposition divider
Double-click to reset position
Easy image upload via Framer properties
No coding required

Perfect For

UI/UX case studies
Photo retouching showcases
Brand redesign presentations
Before/after transformations
Product comparisons
Portfolio websites
Creative agencies & freelancers

Customization

Easily customize every visual element directly inside Framer, including images, orientation, divider styles, handle appearance, cursor behavior, and animations to match your brand perfectly.