5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Td98,

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

5a:[["$","$L5d",null,{"post":{"id":"019bbd9e-c5d1-7af9-892f-7a809e1b4def","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a0731dc2-e627-4a50-81d2-75a7b5791669","name":"Product Dude","slug":"product-dude","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/76312/avatar-SsuYbAXh9sy2AoOnT4NCMkJApE2lG6.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1VL9jbURhSascHlnNPQb","resolved":true,"title":"CMS Compare Slider","body":"$5e","bodyJson":null,"introduction":"","slug":"cms-compare-slider","author":{"framerUserId":"a0731dc2-e627-4a50-81d2-75a7b5791669","name":"Product Dude","slug":"product-dude","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/76312/avatar-SsuYbAXh9sy2AoOnT4NCMkJApE2lG6.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/1VL9jbURhSascHlnNPQb/cms-compare-slider-3pY4a0bnGCS5wmprRnISV42EafZYYY","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-25T20:45:04.970Z","updatedAt":"2026-01-14T15:40:18.484Z","publishedAt":"2026-01-14T17:47:37.809Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://adored-messages-925694.framer.app/","price":"6","paymentUrl":"https://buy.polar.sh/polar_cl_8JzwzkF7NCdcFOqEJDJWfJu3QxBCP1EajbBMm4QxWQk","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"4en9EfDXX1kFJGqsOchm","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-14T17:47:37.809Z","updatedAt":"2026-01-14T17:47:37.809Z","reported":false}}],"$L5f"]

Suggested for you