Streaming live at 10am (PST)

How to create BEFORE/AFTER photo comparison with a interactive slider?


#1

How to create this BEFORE/AFTER image view with a slider? Or do u guys think there can be a better way to showcase comparison photos. Optimal for mobile view.

image

To view the example interaction please visit this site and scroll down to ‘STUNNING HDR’ section


Here is my public share link: LINK
(how to access public share link)


#2

Hi @Ratul_Bhowmik,

take a look at this forum post, this could be your solution:


#3

That’s the exact same function, its’ using the twenty-twenty script, except the label has been altered slightly @Ratul_Bhowmik

It’s really easy to implement into a webflow site, it’s copying and pasting some code. No code editing is necessary.


#4

Found a pen for you https://codepen.io/oloman/pen/jPOvrY


#5

The only other method I could imagine would be coding something in flash using motion tweens but you came up with a very nice power point solution. I would also like to share with you an excellent blog for photographers - http://weedit.photos/


#6

I’ve managed to do this effect in Webflow without using any code.
All made of divs and interactions.

Here is my public link. Feel free to clone:
https://preview.webflow.com/preview/before-and-after-b62255?preview=4a0d5f929f95c4991d40c4778c701f26

Live link:
http://before-and-after-b62255.webflow.io/

(inspired by Slava Fedosenko)


#7

Hi @Eli11 ,

thats looking awesome and is exactly what I need, but unfortunately your public link is not working.
Could you reshare this, please?

Best Maurice


#8

This should work

https://preview.webflow.com/preview/before-and-after-b62255?preview=b1fc13e79fb0d66901cf8a1141db6eca


#9

This is really awesome, but does anyone know a way to inject this into perhaps the rich-text editor? I want to use something like this for a portfolio site, where the content is all being called via the CMS.


#10

Then the only way is to use custom code. You can’t convert content within a rich-text editor into other components without JavaScript.