Interactive before - after image slider

How could I go about creating a before - after image effect, where the user moves a slider left and right and, depending on the position of the slider, different percentage of two images on top of each other is shown?

Good question. I’m afraid this will require a javascript trick. :person_shrugging:

Use sprite masking (it’s an extension), and vary the scale/width/height of the masking sprite according to the slider amount.


Great advice. I got it up and running about an hour after I posted the question. I wasn’t aware of the extension by that time. It was quite straightforward afterwards.

Thanks for the assistance!

Nice, good to know! :+1: