Compare Slider
Drag a line across two pictures to see what changed.
A Pro component: the live demo and the code come with Pro.
Settings
Pro- position
- direction
- hover
- glide
What it does
Compare Slider is an image animation ready for your AI assistant, React or plain JavaScript, with no dependencies. Also called before after or image comparison.
Two images sit on top of each other, split by a thin line with a round handle. Drag it, or tap anywhere, and the line glides over to uncover more of one. It works with a finger, and the handle answers to the arrow keys.
With Pro
The AI prompt, the React component, the plain JavaScript file and the embed come with Pro, along with the live demo. Every setting is optional: with none, you get the effect as the preview shows it.