How to add a Before & After Image Slider to Framer

Framer before and after slider

Our before/after image slider for Framer is the perfect tool for letting users compare two images in an interactive and engaging way. By sliding a divider left or right, users can reveal one image over the other. This type of slider is ideal for showcasing transformations, improvements, or comparisons, making it a popular feature in web design.

Clone and Preview

Want to skip setup and see it in action?

👉 Clone this Framer project

👀 Preview the live demo

‍

1. Copy the Component to Framer

To add the component to your project, simply copy the following component link

https://framer.com/m/Before-After-n0pn.js@8Ae8OoMAv5FTlgdFbkjS

Alternatively, you can remix our project here 👉
‍https://framer.com/projects/new?duplicate=amSEPZ7vexxhZqjrgreQ

2. Paste Component into Framer Canvas

Once you've copied the URL, navigate to your Framer project and paste the link directly into your canvas using CTRL + V (or CMD + V on Mac). The component will appear in your project and is ready to use right out of the box.

3. Add Images & Customize!

After adding the component, add your images and start customizing. Framer’s intuitive interface allows you to tweak various properties to make the slider fit your project’s style.

Here are some customization options you can explore:

• Use custom handles for the slider to match your design.
• Add custom labels to give the slider a unique feel.
• Adjust colors, typography, and other styles to fully integrate the slider into your product.

Make it your own and let your creativity shine!

Did you find this helpful? 💕

Your support means the world to us! In just 10 seconds, you can make a big difference:

• Join our community Discord Channel.
• Download our Free Webflow Booster App.
• Share what you built with us on Twitter! We re-post to thousands!

Thank you for being awesome! 🌟