Two screenshots become a polished animated comparison, exported as a video, GIF, animated SVG, or an interactive embed for your website.
Three ways in. Pick whichever matches what you have on screen. The tool's the same either way.
Sidebar — Creative → Before & After
You'll find a "Before & After" entry under "Creative" in the main sidebar, right next to Brand Studio. Selecting it loads the comparison tool in the main window, so there is no separate window to manage.
Menu — File → New Comparison… (⌘⇧K)
For a dedicated window (helpful when you want the full editor visible at once), use the File menu or the ⌘⇧K shortcut. The standalone window opens at 1200×800 by default and can be resized smaller.
Drag two images onto the drop zone
If you already have the two screenshots ready, just drag both onto the drop area. OwnClip puts the older creation date as Before and the newer as After. Drop one image on a specific Before/After slot to override.
The drop zone is built to make filling Before and After feel obvious. While only one slot is filled, the other one shows a dashed indigo border with the next-step prompt, plus a "1 of 2" progress dot row at the top.
Tap a Library thumbnail
The drop zone shows a horizontal "Recent from your Library" strip: your last 24 image captures and imports. Tap one and it fills the next empty slot (Before first, then After). Each thumb shows a small BEFORE / AFTER badge so you know what the next tap will do.
Pick from the file picker
Click an empty slot to open a file picker. It now allows multi-select. Pick two images and both slots fill at once (older → Before, newer → After). Pick one and only the slot you clicked fills.
Drag from anywhere
Any image URL drag drops onto a slot, whether it comes from Finder, the Library tab, or the Library strip. The slot border highlights when targeted so you know which one will receive it.
Right-click for explicit slot
Right-click a Library thumbnail and pick "Use as Before" or "Use as After" to override the auto-fill order. Useful when you want to replace Before specifically without clearing After first.
Four options. The right-side params panel previews each one live as you scrub the slider below the canvas.
Slider Wipe
A vertical line moves left → right, revealing After underneath. This is the default, and it works for nearly any pair.
Crossfade
Smooth opacity blend. Best when both images frame the same content and you want the change to feel calm.
Vertical Wipe
Same as Slider Wipe but top → bottom. Useful for portrait screenshots or stacked content.
Split
Both edges open from the middle outward, revealing After in the corners first. Dramatic, which makes it good for marketing.
Click Export in the bottom toolbar. Pick one of four formats. For SVG and HTML the sheet shows a live syntax-highlighted preview of the generated code with a Copy button.
MP4 (H.264, 30fps)
Social media (Twitter, LinkedIn), Slack, embedded in docs. Plays everywhere, ~6 Mbps default.
Animated GIF (15fps)
Universal compatibility: emails, older platforms, GitHub READMEs, Notion. Larger file than MP4 for the same quality, but no codec questions.
Animated SVG
Crisp at any size, for websites and marketing pages. Pure CSS @keyframes drives the wipe / clip-path, no JavaScript. Both source images embedded as base64 PNG.
Interactive HTML embed
Juxtapose-style draggable handle the reader controls. A self-contained .html file (no CDN, no external scripts) you can drop into any CMS or commit to a docs repo.
Browse the full background library
The Beautify backgrounds (220 hand-built presets across Plains, Gradients, Mesh, Shapes, Patterns, Themed) are available here too. Open the Background picker in the right-side params panel.
Loop modes
Once plays through and stops at After. Loop restarts from Before. Ping-Pong runs Before → After → Before in a smooth triangle wave, which suits short comparisons that auto-replay forever.
Customize the labels
Default labels are "Before" and "After" but you can change them: "v1" / "v2", "Old" / "New", "Before redesign" / "After redesign". Labels fade in/out as the transition progresses so they don't obscure the content.
Hold to compare in the screenshot editor
When you have the Beautify panel open on a single screenshot, the "Hold to compare" pill above the canvas lets you press-and-hold to see the raw screenshot, release to return to the styled view. Quick A/B without disabling the beautify layer.