Streaming live at 10am (PST)

Before / after drag slider ↔️


#1

: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
Tobi


#2

By custom code and javascript plugin.


#3

Thanks @Siton_Systems

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


#4

Great.

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.


#5

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


#6

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


#7

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

before body - small changes for - @markos84uk project:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.event.move.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.twentytwenty.min.js"></script>

<!--- the rest of the code from markos84uk  project -->
<script>
$(function(){
  $(".twentytwenty-container").twentytwenty();
});
  
$(window).load(function() {
  $("#beforeafter").twentytwenty();
});
</script>

image

Try this - it should work fine (If not - you should also replce /* Plugin CSS */ with this):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/css/twentytwenty.min.css" />


#8

http://webflow-samples.webflow.io/animation-samples/before-after-image-changing


#9

nice! :smiley: thanks for sharing


#10

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.