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.Features
Glassmorphic Design System
The entire component has the glass effect, the rail track, and all three handle styles, creating a unified visual language that adapts to any surface behind it.
Accent Color Cohesion
A single Accent Color property drives every interactive element: the divider line between images, the grip lines and chevrons inside the thumb, the Before/After badge labels, and the hover glow effect. Change one color and the entire component updates in unison.
Dual Orientation
Switch between Vertical (left/right split) and Horizontal (top/bottom split) orientation from the property panel. The clip-path axis, drag axis, divider line, and keyboard navigation all adapt automatically. Both orientations are semantically correct — 0% shows the Before image fully, 100% shows the After image fully.Three Handle Styles
Choose from Pill (rounded rectangle), Circle (disc), or Arrow (chevron pair).Scroll-Triggered Reveal Animation
When Auto Reveal is enabled, the component runs a two-phase animation when it enters the viewport: Phase 1 sweeps the handle from 0% to 100% across the full image width. Phase 2 settles back to the configured Settle At position. Speed presets (Slow, Medium, Fast) control the duration of both phases proportionally. IntersectionObserver with threshold 0 handles detection — fires immediately for hero sections, fires on scroll for below-fold sections.Swipe Momentum
The momentum spring for a natural, weighty feel. When Swipe Momentum is enabled, releasing a fast drag flick applies a spring-based deceleration that carries the handle naturally past the release point. Velocity is sampled from the last 5 pointer events for accuracy. Full Keyboard Accessibility
When Keyboard Support is enabled, the component receives focus and responds to arrow keys. In Vertical orientation: Right Arrow moves forward, Left Arrow moves backward. In Horizontal orientation: Down Arrow moves forward, Up Arrow moves backward. Each key press moves the handle 5% in the respective direction. Full ARIA slider role, aria-valuemin, aria-valuemax, and aria-valuenow are implemented. A focus ring using the accent color appears on keyboard focus.Before / After Badge Labels
Accent-colored pill badges sit below the rail displaying the Before Label and After Label text. These same values serve as the alt text for the respective images — one property serves both the visual label and the accessibility description. Defaults are BEFORE and AFTER in uppercase; type anything you want.Flexible Image Sources
Each image slot supports two source modes: Upload (Framer image asset) and URL (external or CDN link). Switch between them per image independently. Default images load from the MODAX CDN so the component renders immediately on canvas drop without any configuration.Six Aspect Ratio Presets
Landscape 16:9, Standard 3:2, Square 1:1, Portrait 4:3, Cinema 2.39:1, and Custom. The Custom option reveals a numeric ratio input. Aspect ratio is enforced via a padding-top trick that works correctly in Framer canvas even when the parent frame has no defined width.Technical NotesBrowser Compatibility
Full cross browser support on desktop and mobile devices.Aspect Ratio Rendering
This ensures the image frame renders correctly in Framer's canvas even when the parent frame has no defined width at the time of drop.
Reveal Animation Engine
The reveal animation uses IntersectionObserver with threshold 0. This fires as soon as any pixel of the component enters the viewport — correct behavior for both hero sections (fires on mount) and below-fold sections (fires on scroll).
Drag System
The component uses a dual pointer handler architecture. The slider rail handles drags (always on the horizontal axis). The image frame handles image drags (axis-aware — vertical axis in Horizontal orientation, horizontal axis in Vertical orientation). Both handlers sync to the same Framer Motion.
Performance
All internal components use to prevent re-renders when only the drag percent changes. The clip-path and thumb position use Framer Motion's hardware-accelerated. The smooth spring interpolation runs entirely on the animation thread without triggering React renders on every frame.
MODAX
