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 @magicmark


#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 - @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" />


#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.


#11

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!)


#12

Does anyone, anyone know the theory of why @serjgavriluk 's slider actually works? I’m a bit of a loss to explain it. Thanks!


#13

@chippwalters - you watch this video? (In Russian - but use youtube auto subtitles)


#14

Yes, unfortunately I don’t speak russian. Do you know, generally how they are doing it?


#15

@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.

#16

Sorry i never try this - ask @serjgavriluk .

In my opnion use twentytwenty - 5 minutes and your done (+ Mobile with swipe)


#17

@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!