Hybrid Media Slider
The universal comparison tool for images & videos. Features "Hybrid Sync" playback, touch-friendly handles, customizable labels, and responsive layout
Make it with Workshop
Build your own component with AI
Hybrid Media Comparison is the ultimate Before/After slider for Framer. Unlike standard sliders, it seamlessly handles Images and Videos, offering a premium, interactive experience for showcasing renovations, retouching, color grading, or design iterations.
Key Features
Compare Image-to-Image, Image-to-Video, or Video-to-Video.
Unique "Play on Reveal" logic making video comparisons engaging and performant.
Control handle shape, icon type (arrows, chevron, dots), colors, and opacity.
Optional "Before/After" labels with customizable positioning, styling, and backdrop blur simulations.
Works perfectly on mobile, tablet, and desktop with smooth gestures.
Supports both Horizontal and Vertical comparison modes.
Usage
Drag onto the canvas.
Select your media type (Image or Video) for both sides.
Upload your assets or paste URLs.
Customize the Handle, Overlay, and Labels to match your brand.
Enable Hybrid Sync to autoplay videos only when interacting.
Customization Options
Handle: Square, Rounded, or Circle shapes. Custom icons.
Labels: Adjust text, font size, background opacity (using color alpha), and border.
Overlay: Add a subtle color overlay to the unrevealed side.
