A browser window pops open, the URL types itself and the page loads in. Upload your screenshot, or let the blocks build themselves.
Device Mockups
Before/After Wipe
- before after
- redesign
- comparison
Loading editor
Before and After Website Animation – Redesign Wipe Mockup
About Before/After Wipe
A divider sweeps across a browser window to compare a muted old design with your new one, then settles in the middle with labels.
Part of Device Mockups. New to this kind of graphic? Read How to Show an App on a Phone Mockup in a Video.
- Category
- Device Mockups
- Length
- 7.5 seconds, up to 60 seconds
- Playback
- Plays once
- Controls
- 16 editable
- Format
- MP4 · WebM · PNG sequence
- Alpha
- WebM or PNG sequence
- Resolution
- 720p to 8K
- Aspect
- 16:9 · 9:16 · 1:1 · 4:5
- License
- Commercial use included
Frequently asked
What is the Before/After Wipe animation?
A divider sweeps across a browser window to compare a muted old design with your new one, then settles in the middle with labels. It belongs to the Device Mockups category on velements, where you edit it in the browser and download it as a finished video file.
What can you customize in Before/After Wipe?
Every control in the editor, grouped the same way there. Content: screen, screenshot, values, title, labels and subtitle. Typography: font. Style: background, text color, primary, secondary, accent and screen theme. Layout: aspect ratio and scale. Motion: duration. Each change appears in the live preview straight away, and editing is free.
How long is Before/After Wipe?
Before/After Wipe runs 7.5 seconds by default, and you can set any length up to 60 seconds before you export. It plays once from start to finish, so it drops straight onto a cut or an opening.
Can you download Before/After Wipe with a transparent background?
Yes. Set the background to Transparent, then export a PNG sequence for Premiere Pro, After Effects, DaVinci Resolve, Final Cut Pro or Figma: import the first frame as an image sequence and it drops onto a track above your footage with a straight alpha channel. Export WebM with a VP9 alpha channel for the web and for CapCut. MP4 has no alpha channel, so it keeps a solid color or image behind the animation.
Can you use Before/After Wipe in commercial projects?
Yes. Each download comes with a perpetual commercial license in your name for client work, ads and products, and you may sell the edited clip on stock footage sites. Reselling the preset itself as an editable template is not allowed.
Related animations
Laptop Open
10sA laptop lid swings open on a dashboard with KPI tiles and live charts, or your own screenshot. A clean opener for SaaS and web products.
A laptop, tablet and phone rise in one after another showing the same product on every screen, then drift with gentle parallax.
Two dots per row connect with a bar to show the gap between them, growing into place. Type your own paired values.
Lines tilt between a before and after axis, colored by whether each item rose or fell. Type your own paired values.
Before / After
7.5sA comparison divider with a draggable-style handle swings across the frame under Before and After labels.
App Carousel
10sA row of phones glides past a centre focus, showing a different screen on each. Upload up to five screenshots, one per phone.
Store-style screens slide by one at a time, each phone topped with a bold caption and a progress indicator. Built for vertical previews.