Streaming live at 10am (PST)

Before / after drag slider ↔️


:heart:️ Dear community,
I’ve got a new prospect customer, who wants me to redesign his page in Webflow. Anyway, he’s asking about one particular effect used on his current website:

How do I do that? As far as I can see, there’s no such interaction available. Any ideas how to solve this?

Otherwise I have to talk him into a “better” solution (descriptive buttons).

Thank you very much and kind regards


By custom code and javascript plugin.


Thanks @Siton_Systems

Also, there is a clone-able Webflow project with this effect in action, from @markos84uk



Only the noted her are not update.

From twentytwenty github:

Important: The new code support Swipe between two images (Mobile freindly):

We’re using custom movement events from the jquery.event.move library in order to support 1:1 slider movement on mobile devices. read more

But yes this project is a great starter. With swipe i think twentytwenty is the best before/after plugin.


Thank you so much. This looks like a good starting point!


Thanks for your huge efforts. I will also try this one, for sure!


Try to use this code tweaks (To get the swipe support + remove jquery-2)

before body - small changes for - @markos84uk project:

<script src=""></script>
<script src=""></script>

<!--- the rest of the code from markos84uk  project -->
$(window).load(function() {


Try this - it should work fine (If not - you should also replce /* Plugin CSS */ with this):
<link rel="stylesheet" href="" />



nice! :smiley: thanks for sharing


Thanks all very much for your input. Ultimately I solved it with a common slider – mainly because we had a better feeling about mobile users this way.