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.
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.
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.
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.
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.
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.
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.
Zlatko Marjanović
