This image comparison tool is going to allow us to drag a bar left and right to reveal “before” and “after” images. Tools like this are great for people who specialize in photo retouching.
In this example we use it to compare a grayscale image to one that is full color.
This tool is powered by GreenSock’s Draggable
Draggable allows you to make any DOM element (or SVG element), well, draggable 🙂
Draggable has a massive API with tons of features and I could probably create a 4 hour class on Draggable.
Today I’m going to just give you a quick walk-through of the basics so you can see how easy it is to set up.
Draggable with clip-path
The secret to today’s lesson is that we are going to have Draggable allow us to drag a div around (the red bar) that is going to control the right edge of where our clip-path will be rendered.
Be sure to watch the entire video for a complete breakdown of all the code!
Watch the Video
Explore the Demo (drag the red bar)
Edit Demo in Browser (best on desktop)
Homework
- Build up the starter file and use your own images
- Play with the GreenSock’s Throw / Toss demo (be sure to adjust snapping and other options)
- Check out the Draggable API Docs and see just how robust the API is.
If you want Draggable to come to life with super-smooth, velocity-based throws and spins (as I showed in the video) you’ll need the Inertia Plugin which comes with a Club GreenSock membership. As with all GreenSock bonus tools, it is free to use on CodePen.
Creative Coding Club
My Creative Coding Club courses are packed with lessons just like this. Let me guide you on your journey towards mastering the GreenSock Animation Platform.
