Drag to reveal the difference.
Reveal is a polished before/after image comparison slider for Framer. Add two images and visitors can drag anywhere across the comparison, swipe on touch, or use the keyboard to explore the difference.
An optional reveal-on-scroll intro demonstrates the comparison automatically when it enters view, with Sweep and Peek styles to choose from.
Built for real responsive sites, Reveal includes aspect-ratio presets, responsive images, image focal-point support, reduced-motion behavior, keyboard accessibility, and full customization from the Framer sidebar.
Highlights
• Drag anywhere, touch + keyboard control • Optional Sweep + Peek reveal-on-scroll intros • 16:9, 4:3, 1:1, 3:4 + Fill Height layouts • Cover + Contain image modes • Custom labels, divider, handle + accent ring • Optional cursor-based hover zoom • Custom caption + typography controls • Responsive-image optimization • Accessible focus states + slider semantics • Reduced-motion support • Responsive label behavior • Zero dependencies
Setup
Add Reveal to your page, upload your Before and After images, choose an aspect ratio, and preview. Everything else can be customized directly from the sidebar.
For best results, use matching Before and After image dimensions and compositions.
Drag to reveal the difference.
Reveal is a polished before/after image comparison slider for Framer. Add two images and visitors can drag anywhere across the comparison, swipe on touch, or use the keyboard to explore the difference.
An optional reveal-on-scroll intro demonstrates the comparison automatically when it enters view, with Sweep and Peek styles to choose from.
Built for real responsive sites, Reveal includes aspect-ratio presets, responsive images, image focal-point support, reduced-motion behavior, keyboard accessibility, and full customization from the Framer sidebar.
Highlights
• Drag anywhere, touch + keyboard control • Optional Sweep + Peek reveal-on-scroll intros • 16:9, 4:3, 1:1, 3:4 + Fill Height layouts • Cover + Contain image modes • Custom labels, divider, handle + accent ring • Optional cursor-based hover zoom • Custom caption + typography controls • Responsive-image optimization • Accessible focus states + slider semantics • Reduced-motion support • Responsive label behavior • Zero dependencies
Setup
Add Reveal to your page, upload your Before and After images, choose an aspect ratio, and preview. Everything else can be customized directly from the sidebar.
For best results, use matching Before and After image dimensions and compositions.
