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.
• 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
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
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.
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.
• 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
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
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.
