ImageCompare
Premium Interactive before/after image comparison slider with draggable handle, labels, icons, and full customization. Works horizontally or vertically with smooth transitions.
Made with Workshop
Build your own component with AI
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.
Key Features
Horizontal or vertical orientation with adjustable starting position
Draggable handle with three styles (line, circle, both) and full size/color control
Built-in icon library (arrows, chevrons, drag dots, resize, move) or upload your own custom icon
Optional Before and After labels with configurable text, font, color, and position (top, bottom, overlay)
Smooth transitions, hover effects, and touch support with momentum for mobile
Keyboard navigation (arrow keys, reset to initial, snap to center) for accessibility
Background, border, and shadow customization, including radius, color, blur, and spread
Lightweight and responsive design for seamless integration in Framer projects
Perfect for
Showcasing product upgrades or feature changes
Before-and-after photography or image retouching comparisons
UI/UX redesign previews or A/B testing results
Architecture, real estate, or renovation transformations
Any interactive portfolio, case study, or marketing page that benefits from a clear visual comparison
This component gives you full creative control while keeping interactions smooth and intuitive, so your audience can focus on the differences you want to highlight.
