CMS Compare Slider — Ultra-customizable Before/After Comparison Slider with CMS support, diagonal layouts, lightbox, hover effects & more. Connect Collection Lists, images, videos or custom components

🎯 What is CMS Comparison Slider?

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.

✨ Key Features

📊 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)

🚀 How to Use

1. Drag the component onto your canvas

2. Choose your Data Source (Gallery, Collection List, or Static Items)

3. Connect your media or components

4. Select Direction, Separation Style, and Behavior

5. Customize the design to match your brand

6. Enable Lightbox for fullscreen viewing (optional)

💡 Perfect For

• Portfolio showcases (before/after edits)

• Real estate (renovation comparisons)

• E-commerce (product variations)

• Design agencies (concept vs final)

• Photo editing services

• Web design iterations

🔒 Refund Policy

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!

💳 Secure Checkout

All payments are securely processed through Polar.sh.