jQuery TwentyTwenty Plugin

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them! Download TwentyTwenty The Problem We recently needed a way to showcase the visual differences between two images. Folks tend to typically place two images next to each other in hopes that it'll be clear exactly what changed. One of our Design Leads pointed us to Canada Goose, a cold weather outfitter. This sparked a few new ideas on how to do something similar for our own needs. Responsive and functional on all devices Doesn't require images to workWorks with Foundation out of the box How it works TwentyTwenty works by stacking two images on top of each other. We're using custom movement events from the jquery.event.move library in order to support 1:1 slider movement on mobile devices. Setting up It's easy to get started, just wrap two images inside of a container. Then call twentytwenty() on this container once the images have loaded: And voila! Preventing FOUC JavaScript Options Related: