← All Components
Background
Compare Slider Pro X
$8
A background component built for Framer. Live preview below — interact with it directly before you buy.
About Compare Slider Pro X
CompareSlider is an interactive before and after image slider for Framer. Drag a smooth vertical or horizontal divider to compare two images with full precision. Powered by unified pointer events for seamless mouse and touch interaction. Choose from paper or glass themes, add custom labels, control image focus points on both axes, and switch directions with a single prop.
Features
- →Horizontal and vertical direction — switch with a single prop
- →Smooth divider with circular handle and scale-on-drag effect
- →Before and After labels with backdrop blur and theme-aware styling
- →Mouse, touch and keyboard support — arrow keys, Home and End
- →Image focus point controls — X and Y offset for both images independently
- →Paper and glass themes with smooth animated transitions
- →Mobile responsive — auto-reduces height under 768px
- →Demo Mode — toggle direction live without leaving Framer
- →Accent color control for focus ring and highlight states
- →Works out of the box — upload two images and you're done
Use Cases
- →Product photography and packaging before and after reveals
- →Beauty, skincare and cosmetics treatment transformation pages
- →Architecture and interior design renovation comparison sections
- →Real estate staging and remodeling before and after features
- →Photo editing and retouching showcase and portfolio case studies
- →Fitness and body transformation landing and marketing pages
- →Art restoration and digital artwork reveal presentation sections
- →Web design and branding case study and comparison pages
- →Fashion lookbook and lifestyle product comparison sections
- →Event and venue decoration before and after transformation showcases
Best value
Get every component with All-Access — $129
Compare Slider Pro X and all 122 others, current and future.
Get All-AccessMore Background
