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
By custom code and javascript plugin.
Thanks @Siton_Systems
Also, there is a clone-able Webflow project with this effect in action, from @magicmark
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.
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)
<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>
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" />
nice! 
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.
Can someone explain how this works? It doesn’t use any jquery and only uses native webflow animation. I’d be interested in understanding more about how/why this works (I know I can download it, but a couple sentences describing the principle would be helpful. Thanks!)
Does anyone, anyone know the theory of why @serjgavriluk 's slider actually works? I’m a bit of a loss to explain it. Thanks!
@chippwalters - you watch this video? (In Russian - but use youtube auto subtitles)
Yes, unfortunately I don’t speak russian. Do you know, generally how they are doing it?
@Siton_Systems
By generally I mean
Sorry i never try this - ask @serjgavriluk .
In my opnion use twentytwenty - 5 minutes and your done (+ Mobile with swipe)
@Siton_Systems
Is there a tute somewhere on how to implement (fullscreen) in webflow?
OOPS. Nevermind, I see where ABOVE you provided the info. Thanks!
Hey Ezra, I implemented this magic slider and it looks great on the desktop breakpoint but on smaller breakpoints it breaks my site’s responsiveness. Do you know of any way to fix this?
Here is a read-only link: https://preview.webflow.com/preview/virtualstaging-5e305218ed685333f924a3c3?utm_medium=preview_link&utm_source=designer&utm_content=virtualstaging-5e305218ed685333f924a3c3&preview=8361ccf527a25b2630a11867f9442b8c&workflow=preview
Hi, Please Add a live URL (No way to test custom code by read-only link).
Here is a live link: https://virtualstaging-5e305218ed685333f924a3c3.webflow.io/
