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:
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>
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" />
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!)
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?