Back to Blog

How to Add a Before & After Image Slider to Framer

Tutorials
April 20, 2023

Learn how to add a beautiful before and after image slider to your Framer projects. Customize all aspects including handles and labels directly in Framer.

Compare two images with this beautiful before and after image slider.

Our before/after image slider for Framer provides the best way to allows users to compare two images by sliding a divider left or right to reveal one image over the other. This type of slider is commonly used in web design to showcase the transformation or improvement of an object or space over time.

To add the component paste this URL in your Framer Canvas ūü•≥
https://framer.com/m/Before-After-n0pn.js@8Ae8OoMAv5FTlgdFbkjS

OR Remix the project here ūüĎČ
‚Äćhttps://framer.com/projects/new?duplicate=amSEPZ7vexxhZqjrgreQ

‚Äć

1. Copy the Component to Framer

To add the component to your project, you simply need to copy the following component link. Highlight and copy the full URL and then paste (CTRL + V) into your canvas. As an alternative method, you can also remix our project and then copy the component from the remix.

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

Copy the component URL listed above

‚Äć

2. Paste Component into Framer Canvas

Once you've copied the URL in full, you can navigate to your Framer project and paste it directly into the canvas. The component will be ready to use out of the box, you just need to select your 2 images.

Paste the component into your Framer canvas

‚Äć

3. Add Images & Customize!

Once you have added the component and selected your images you can start to customize various properties to suit your project. You can use completely custom handles and labels to give it a unique feel the integrates well into your product.

Customize the slider as you like

‚Äć

Did you use this component?

Mention us on socials and we will re-share your results to our active community of over 50,000+ designers & developers.

Enjoy Legends!
OTHER BLOG ARTICLES

Check out some other articles!

Join Over 55,000+
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 55,000+ other creators across our communities.