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