Framer component

Compare Card

Create stunning before-and-after comparisons in Framer with this interactive slider. Simply drag or hover to reveal differences between two images. Perfect for showcasing transformations, design work, or any visual comparison with style.

Free

card
compare
Custom Code Component

Component Details

Instructions

Copy and paste the component into your Framer project, then adjust the property controls in the right panel to customize and configure it for your website.

About

A sleek and interactive before/after image comparison component that allows users to dynamically reveal differences between two images. Perfect for showcasing transformations, design iterations, or any visual comparisons in your Framer projects.

✨ Key Features

  • Interactive Comparison: Choose between hover or drag interaction modes
  • Smooth Animations: Fluid transitions with precise image revealing
  • Customizable Handle: Beautiful gradient glow effects with configurable colors
  • Autoplay Mode: Optional automatic sliding animation for hands-free demonstrations
  • Responsive Design: Adapts seamlessly to any container size
  • Touch Support: Full mobile device compatibility

💡 Pro Tips

  1. Use similar image compositions for the most effective comparisons
  2. Enable autoplay for engaging landing page demonstrations
  3. Customize the handle colors to match your brand identity
  4. Use the hover mode for quick comparisons, drag mode for precise control
  5. Adjust the initial slider percentage to highlight specific areas of comparison
  6. Consider using WebP images for optimal performance

🎨 Styling Options

  • Handle Design: Customize colors for the handle bar, dots, and line
  • Glow Effects: Two-color gradient glow customization
  • Border Radius: Adjustable card corners for different visual styles
  • Interaction Mode: Toggle between hover and drag modes
  • Autoplay Settings: Configurable duration and behavior

This component provides a professional way to showcase before/after comparisons in your Framer projects, with extensive customization options and smooth interactions that work across all devices. Perfect for portfolios, product showcases, or any project requiring visual comparisons.

This Framer component was inspired by Aceternity UI's component 🤝

We appreciate Aceternity UI efforts in creating open-source react components, which allows us to "Framerize" and offer them to the Framer community.

Config Main Bachoff Studio • Web Design and Development • Framer Templates, Components and Code

Need a custom Framer component that goes beyond what's possible on the canvas? We'll create the custom code solution for you! Sky is the limit. Request a custom component here.

Bachoff Framer Components

You may also like...

Preview image only. Click to try component.

elite
PFP Generator Bachoff Studio • Web Design and Development • Framer Templates, Components and Code

PFP Generator

A customizable PFP (profile picture) generator component for Framer with layered image composition, text overlays, and high-resolution export capabilities. Perfect for Web3 projects and community platforms.

Preview image only. Click to try component.

elite
Meme Generator Bachoff Studio • Web Design and Development • Framer Templates, Components and Code

Meme Generator

Create, customize, and share memes with this powerful Meme Generator for Framer. Features drag-and-drop composition, unlimited text layers, custom uploads, and high-res exports. Perfect for NFT projects, crypto communities, and DAOs.

Live interactive demo. Click the button for details.

pro

Investment Return

420

Months

6

Investment

70

Sliders Calculator

Build formula-driven calculators with this versatile Framer component. Converts mathematical expressions into smooth, animated sliders that update in real-time with fully customizable styling.

FAQ

“Frequently“ Asked Questions

Get answers to common questions about the Bachoff custom code Framer components.

What are custom code Framer components?

Custom code components are advanced elements built for Framer that enhance its default capabilities, allowing designers to implement features like 3D mockups, generators, and dynamic charts.

Do I need coding knowledge to use custom code components?

No coding knowledge is required! Our components are designed to be plug-and-play, but they also allow for further customization if you have coding skills.

What types of components do you offer?

We offer a variety of components, including 3D laptop mockups, PFP and MEME generators, charts (line, bar, pie, donut), sliders, calculators, and UI elements like cards and compare cards.

How do I install a custom code component in Framer?

Installation is straightforward! Usually it's just a matter of copying and pasting the code into your Framer project. You'll receive step-by-step instructions with each component, including how to integrate it into your Framer project.

Are the components compatible with all Framer projects?

Yes, our components are fully compatible with any Framer project. If you face any compatibility issues, our team is here to help.

What's the difference between free, pro, and elite components?

Free components offer basic functionality, while pro and elite components include more advanced features and customization options, catering to professional and enterprise-level needs.

Can I request a custom-built component?

Absolutely! We specialize in creating custom solutions tailored to your specific needs. Contact us for a quote and delivery timeline.

“Sign up” for the newsletter_

Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.