How to create a before-and-after GIF from screenshots

A useful comparison changes the subject, not the camera position. Capture the same interface region at the same scale and with the same surrounding context. If one image includes a wider window, a different zoom, or a shifted scroll position, align those differences deliberately before asking a reader to judge the change.

Keep both original screenshots. They are easier to inspect, archive, and describe than an animation alone. When the comparison is for a support report, include a short written explanation of what changed; a recipient should not need to time a pause perfectly to understand it.

Choose a static pair for a discrete change such as a corrected layout, an erased annotation, or an updated setting. A sequence of interactions belongs in a recording workflow, which this two-frame exporter does not provide.

1. Open the before screenshot as the base document. Use Insert image… or Paste as overlay to add the after screenshot as an image object.
2. Move and resize the overlay so the common edges match. Review its crop and rotation. For a full-canvas comparison, the overlay should cover the intended canvas area rather than leave a distracting strip of the base visible.
3. Select the image overlay. Choose Before / after in its context controls, or Before/after GIF from Image actions. An unselected image or a selected text annotation is not a valid replacement for the required bitmap overlay.
4. Set Frame delay (ms). The accepted range is 100 to 10000 milliseconds in steps of 10. Choose whether to Repeat continuously and whether to use Full overlay opacity in After.
5. Select Export GIF, choose a destination, and open the resulting file in a viewer that plays GIF animation. Watch more than one transition if it loops, then inspect both original stills as well.

Suppose a settings panel previously clipped a long label, and the corrected version wraps it cleanly. Capture the same panel before and after at the same window size. Add the corrected capture over the original, then align the panel corners rather than aligning only the changed text.

Start with a frame delay of 1000 ms as an illustrative reading pace, not a required optimum. If a reader cannot finish the label before it changes, increase the delay or send the stills alongside the animation. A slower meaningful comparison is better than rapid flicker that only suggests something moved.

Keep a shared callout outside the changed region if it helps identify the control. Other annotations appear in both frames; the exporter does not automatically hide every arrow or text label when producing the before frame.

The before frame hides only the selected image overlay. The after frame retains that overlay's alignment, crop, and rotation. Other image objects and annotations remain in both. If you accidentally select an unrelated overlay, the GIF can be technically valid while comparing the wrong change.

The full-opacity option controls the selected overlay in the after frame. It is useful when you temporarily lowered opacity to align images, but review it intentionally. If the image changes or the selection becomes stale before export, reopen the comparison dialog rather than assuming old settings still describe the current document.

Exporting the comparison does not save the editable document's revision. Save a separate PNG or JPEG output and retain the original screenshots. Keep the editor open if you need to revise its layers; PNG and JPEG exports do not preserve an editable project. A successful GIF is a separate output.

GIF has a limited palette. Fine gradients and small colored text may look worse than in the PNG originals. Fully transparent pixels can stay transparent, while partial transparency is blended on white by this exporter. Test the actual file against its destination background before sending it.

Review both frames for names, tokens, account details, and hidden context. Covering a secret with the selected after overlay is not redaction: the before frame deliberately hides that overlay and can reveal the underlying content. Make both source states safe independently before comparing them.

Provide a non-animated alternative and a plain-language description of the difference when sharing with a broad audience. The animation should support the explanation rather than be the only way to access the information. If the destination shows only the first frame, the two original stills preserve the comparison without relying on autoplay.