The Before & After Image Comparison component makes it easy to show transformations or differences between two visuals in a clean, interactive way. Visitors can drag a handle to reveal more or less of each image, instantly highlighting changes..
🎚️ Smooth draggable slider for comparing before and after images
🔁 Horizontal or vertical reveal options
🎨 Fully customizable handle, border, radius, icons, and colors
🪄 Soft transitions with adjustable easing and animation timing
🌗 Optional overlay labels for Before and After
📱 Touch-friendly, momentum-based sliding for mobile
🖼️ High-quality image rendering and responsive scaling
🧩 Lightweight, clean, zero lag performance
🔧 Works with any layout inside Framer
🔍 Precise divider line with opacity, thickness, and style controls
⚡ Instant setup, plug and use
Photo editing comparisons
UX UI redesign before and after
Product upgrades or refurbishment results
Repair, restoration, and cleanup demonstrations
Furniture or interior design transformations
Beauty, skin care, or retouching showcases
Landscape or architectural changes
Case studies inside portfolios
Marketing pages that highlight improvements
Landing pages that need a strong visual moment
Portfolio sections showing process or progress
Case study storytelling with step-by-step visuals
Product pages that highlight upgrades
Creative agency sites
Photography and editing portfolios
SaaS or tech explanations using visual differences
Drag the component into your canvas inside Framer
Upload your Before image and After image
Adjust the slider direction, horizontal or vertical
Customize the handle styling, padding, radius, border, shadow, and icons
Modify the divider line thickness, opacity, and color
Enable or disable labels for Before and After
Preview the interaction on desktop and mobile
Publish and enjoy a smooth, high-quality comparison experience
Mohd Mehraj
