Before n After Slide

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.