Free Before-After

BeforeAfter Pro is a fully customizable before and after comparison component built specifically for Framer projects that demand performance, flexibility, and clean interaction design. It allows designers, agencies, SaaS companies, real estate platforms, and eCommerce brands to present visual transformations in an engaging, conversion-focused way.

Whether you are showcasing a website redesign, product upgrade, UI improvement, renovation project, photo retouching workflow, medical transformation, or digital agency case study, this component delivers a smooth and professional comparison experience without external dependencies.

Powerful Interaction Modes

Choose from multiple interaction presets to match your design and storytelling goals.

• Drag Slider with precise pointer tracking for full user control

• Hover Scrub for instant interactive reveal

• Click Toggle with animated transition for controlled comparisons

• Auto Loop for dynamic hero sections and landing pages

• Scroll Reveal mapped to viewport position for immersive storytelling

• 3D Flip mode with perspective depth for modern showcase layouts

Each preset is optimized for performance and smooth animation behavior across desktop and mobile devices.

Image and Video Comparison Support

This component supports both image comparison and video comparison, making it ideal for marketing websites, SaaS dashboards, portfolio showcases, and product landing pages.

• Image to image before and after comparison

• Video to video transformation display

• ALT text support for accessibility and SEO

• Video controls including mute, loop, preload, and playback options

• Safe autoplay handling to prevent UI conflicts

You can present product improvements, feature upgrades, and visual transformations with confidence.

Advanced Divider and Motion Controls

Fine-tune how your comparison behaves and animates.

• Vertical or horizontal divider orientation

• Adjustable start position for better composition

• Custom click target percentage for toggle animations

• Transition duration control for smooth easing

• Configurable auto loop speed and amplitude

• Scroll reveal range mapping for narrative sections

These controls allow complete creative flexibility while maintaining stable rendering performance inside Framer.

Fully Customizable Handle System

Design the divider handle to match your brand identity and UI system.

• Line divider style

• Circle knob style

• Combined line and circle mode

• Automatic sizing or advanced manual sizing

• Custom divider thickness

• Custom knob size

• Optional handle shadow styling

This ensures seamless integration into modern SaaS interfaces, portfolio websites, and marketing pages.

Professional Appearance Controls

Match the component to any design system or brand aesthetic.

• Adjustable border radius

• Background color control

• Outline width and color settings

• Shadow presets including custom CSS values

• Clean isolated rendering for layered layouts

The component adapts perfectly to dark mode, glass UI, minimal layouts, and modern web design systems.

Flexible Labels System

Enhance clarity and usability with fully customizable labels.

• Enable or disable labels

• Custom before and after text

• Top or bottom placement

• Font size, padding, and border radius control

• Background color and opacity adjustment

• Blur glass style label effect

This makes it ideal for high-conversion landing pages and interactive product comparisons.

BeforeAfter Pro is built for performance, responsiveness, and real-world use cases. It works seamlessly inside Framer without external libraries, ensuring smooth rendering, clean animations, and full creative control for professional designers and developers.