BeforeAfter
MDX_BASlider
V1.1.0A premium drag-to-reveal Before/After image comparison component engineered for Framer. Ships with a glassmorphic card, rail, and thumb that look stunning on any background — light, dark, image, gradient, or video.
Overview
MDX_BASlider is a premium drag-to-reveal Before/After image comparison component built exclusively for Framer. It ships with a glassmorphic card, rail, and thumb that look stunning on any background — light, dark, image, gradient, or video.
The component is engineered for designers who want full creative control. It handles the interaction, animation, and accessibility — you handle the surrounding layout in Framer. Drop it in, set your accent color, and it's done.
Architecture
Construction Progress
Reveal construction progress vs finished building, before renovation vs after renovation, empty unit vs staged interior.
Design
Brand Transformation
Old brand identity vs refreshed identity, original UI vs redesigned interface, lo-fi wireframe vs polished final design.
Photography
Image Retouching
Raw photo vs color-graded final, unretouched portrait vs retouched result, day shot vs night shot of the same scene.
E-commerce
Product Comparison
Product in natural light vs studio light, unboxed vs packaged, standard variant vs premium variant.
Sustainability
Environmental Change
Before restoration vs after restoration, pre-development landscape vs post-development, pollution levels over time.
Healthcare
Wellness Documentation
Skin condition before treatment vs after, fitness progress documentation, medical imaging comparison.
Urban Planning
Infrastructure Development
Historical map vs current map, before and after infrastructure development, satellite imagery over time.
Data Visualization
Interface Evolution
Dashboard UI before redesign vs after, old data presentation vs new, legacy interface vs modernized experience.
Features Stage
🪟
Glassmorphic Design System
Background rgba(255,255,255,0.22) with backdrop blur 3px and frosted white border — applied consistently to root, rail, and all handle styles.
Properties Gadget
User Guide
Step 1 of 813%
Install Component:
Open your Framer project, navigate to the Assets panel, search for MDX_BASlider in the Marketplace tab, click Install, then drag the component onto your canvas.
Deploy Stunning Before/After Comparisons Instantly
MDX_BASlider combines glassmorphic aesthetics with full keyboard accessibility, scroll-triggered animation, and spring-based momentum — delivering a premium before/after experience with zero code required.
✓ Glassmorphic design system with unified visual language across all surfaces.
✓ Single accent color property drives every interactive element for brand cohesion.
✓ Full keyboard accessibility with ARIA slider role and focus management.
✓ Scroll-triggered reveal animation with speed presets and settle position control.
✓ Dual orientation, three handle styles, and six aspect ratio presets for complete flexibility.
✓ Production-ready code with React.memo optimization and hardware-accelerated animations.
FAQ
Get MODAX Releases First
Early access to components, templates, and plugins — plus exclusive freebies and limited-time discounts.
