The ultimate Before/After comparison component for Framer. Perfect for showcasing transformations, design iterations, photo edits, or any visual comparisons. Connect your CMS data or use static content — it adapts to your workflow.
📊 Flexible Data Sources
Connect single or multiple Collection Lists
Use Gallery connectors for quick setup
Add Static Items (images, videos, components)
Works with custom components: cards, frames, Vimeo/YouTube embeds, and more
🎨 3 Direction Modes
Horizontal (left/right comparison)
Vertical (top/bottom comparison)
Diagonal (with adjustable rotation angle from -90° to 90°)
✂️ 3 Separation Styles
Invisible (clean, no visible separator)
Line (customizable width & color)
Blurred (soft feathered edge effect)
🖱️ 3 Interaction Behaviors
Click & Drag (classic slider control)
Hover Move (slider follows cursor)
Hover + Click Lock (hover to preview, click to lock position)
🔍 Advanced Lightbox
Fullscreen media viewing
Navigation arrows between Before/After
Video autoplay & controls customization
Internal or external control positioning
Fully customizable buttons (size, radius, blur, colors, custom icons)
Keyboard navigation (arrows + escape)
🎭 Hover Effects
Zoom/scale animation on hovered side
Color effects: Grayscale, Sepia, Blur
Smooth customizable transitions
🎛️ Full Design Control
Custom handle icon, size, colors, border, blur
Before/After labels with native Framer font controls
Adjustable border radius
Object-fit options (Cover, Contain, Fill, Scale-down)
Drag the component onto your canvas
Choose your Data Source (Gallery, Collection List, or Static Items)
Connect your media or components
Select Direction, Separation Style, and Behavior
Customize the design to match your brand
Enable Lightbox for fullscreen viewing (optional)
Portfolio showcases (before/after edits)
Real estate (renovation comparisons)
E-commerce (product variations)
Design agencies (concept vs final)
Photo editing services
Web design iterations
Due to the digital nature of this product, all sales are final. Please review the demo and documentation carefully before purchasing. If you encounter any technical issues, contact us at framermaster@gmail.com — we're happy to help!
All payments are securely processed through Polar.sh.