MODAX

BeforeAfter

MDX_BASlider

Visual Proof, Performance Driven.

Get MDX_BASlider

Get MODAX updates

New components, tips, and discounts — straight to your inbox.

MDX_BASlider

V1.1.0

A 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 8

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

The Ultimate Comparison Utility

The MDX_BeforeAfterSlider represents more than just a visual toggle; it is a high-performance infrastructure layer designed to eliminate the friction between "showing" and "proving" value. By combining a physics-calibrated discovery engine with a resilient Media Engine that supports both uploads and dynamic URLs, this component empowers designers to deliver high-impact storytelling without compromising on speed or accessibility. Whether you are showcasing AI transformations, real estate staging, or SaaS redesigns, the slider provides a premium, "Visual DNA"-consistent experience that turns passive viewing into an interactive exploration of quality.

Get MDX_BASlider

Get MODAX Releases First

Early access to components, templates, and plugins — plus exclusive freebies and limited-time discounts.