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
Tobi

By custom code and javascript plugin.

2 Likes

Thanks @Siton_Systems

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

4 Likes

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)

before body - small changes for - @magicmark 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" />

1 Like

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

6 Likes

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.

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

  1. How are they transitioning from one static object to the other without moving the objects? Or, are they moving them?
  2. Is this something which can be done on mobile as well? I notice none of the breakpoints actually work.

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!

1 Like

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/