Before and after GIF maker

How to make a before and after GIF

An animation shows the change happen instead of asking the viewer to compare two pictures. It works best with a matched pair: the same framing, so only the subject changes as the divider moves.

1. Choose your before photo and your after photo, or try the sample photos.
2. Pick a transition. Wipe uncovers the after photo across the before photo; Split moves a divider between them; Crossfade blends one into the other.
3. Choose the direction and motion. Back and forth sweeps over and returns; One way plays the change, then starts again.
4. Set the transition and pause lengths. A slower transition is easier to follow; a pause at each end lets viewers see each version whole.
5. Pick a width, edit the labels, and watch the live preview.
6. Download a GIF, or a video for platforms that prefer video.

GIF or video?

A GIF plays almost anywhere an image can appear — websites, forums, chat apps, documentation, and most email clients — and loops without a play button. GIFs are limited to 256 colours per frame, so smooth gradients can band, and file sizes grow quickly with width and length.

A video is much smaller for the same size and keeps full colour, and many social apps, including Instagram, accept video but not GIF files for posts. The video download records the animation in your browser: recent versions of Chrome, Edge, and Safari can record MP4, while Firefox records WebM. If a site will not accept WebM, convert it or use a browser that records MP4.

Make a smaller GIF

Every frame of a GIF is stored as a separate image, so the transition length and width have the biggest effect on file size. The pauses at each end cost almost nothing, because a pause is a single frame displayed for longer.

Photo grain makes a big difference too. The example animation above, made from a grainy 1920s photograph at 480 pixels wide, is about 3 MB as a GIF for a single loop. Recorded as an MP4 video, two loops of the same animation take about 340 KB.

• Choose a smaller width — halving the width roughly quarters each frame.
• Shorten the transition, or choose One way instead of Back and forth.
• Wipe and Split usually compress better than Crossfade, where every pixel changes in every frame.
• Keep photos simple: noise, grain, and detailed textures produce larger files.

What makes a good before and after animation

Line up the two photos first. When the framing matches, the moving divider reveals the change; when it does not, the whole picture appears to jump. Use the same viewpoint, lens, and light, and crop both photos the same way.

Keep the motion calm. Fast flashing between images is uncomfortable for some viewers and can be harmful for people with photosensitive conditions, so avoid very short transitions on high-contrast images. Pair the animation with a caption that explains what changed, and keep a still image for places where motion is not appropriate.

Make a still side-by-side image · Prepare a matching pair