Before n After Slide

Drag-to-reveal before/after

Before and After Slider Before After is a premium drag-to-reveal comparison for Framer. Drag a glowing handle to uncover the transformation—built for renovations, product demos, beauty results, and agency case studies. Each instance uses its own Before and After images, so it's CMS-safe with multiple compares on one page. Key Features • Custom dual images with smooth drag reveal • Horizontal or vertical direction • Soft aura glow around the frame • Custom Before/After labels • CMS-safe per-instance images • Keyboard arrow control • Canvas-safe static preview for the Framer editor Controls Before / After — image slots for each side Image fit — Cover or Contain Direction — Left/Right or Top/Bottom Start % — initial handle position (0–100) Radius — corner rounding Labels — show or hide chips Before label / After label — custom text Accent — handle and glow accent color Handle — divider color Line width — divider thickness Aura color / strength / spread — outer glow style Perfect for Real estate renovations · Design studio case studies · Beauty and dental results · Product redesign reveals · SaaS old-vs-new stories · Any landing section that needs a clear transformation moment Self-contained Framer code component with full property controls—no external libraries. Drop on the canvas, assign images, tune aura and handle, then publish.

Drag-to-reveal before/after