CMS Compare Slider

🎯 What is CMS Comparison Slider?

🎯 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 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) 💡 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 .