Skip to content

How to Create 3D Animated GIFs (Split-Depth GIF)

With the rebirth of the Animated GIFs In recent years, a curious phenomenon has also been born in which we can see Animated GIFs with what looks like a 3d effect very striking and surprising, all with the naked eye, without the need to use special glasses.

How to create 3D animated GIFs?

This phenomenon (which is still a visual trick) has been baptized on the Internet with the name of SplitDepthGIF (Animated GIFs with split depth). In this article we will see what it is based on and how to create one easily and simply.

1. What is a “Split Depth GIF”?

As we have already commented, it is a Animated GIF specially modified to exaggerate the three-dimensional effect of an image sequence for a highly realistic 3D effect and depth.

Rocket Raccoon (Guardians of the Galaxy) in a Split Depth GIF
Rocket Raccoon (Guardians of the Galaxy) in a Split Depth GIF

2. Is it a 3D animated GIF?

Not really. It could be classified as pseudo-3D, since the image is really in two dimensions, but we take advantage of a number of features that make it easy to perceive it as something that could appear 3D: little depth of field (foreground object on blurred background), size of objects with respect to the viewer, and above all, generally white dividing lines.

3. Where is the catch?

Well, precisely there. The dividing white stripes or lines do practically all the work, creating the feeling of depth in which the object or item in the foreground appears to be approaching and sticking out of its own image. In the following example, this aspect is even exaggerated even more, since a horizontal dividing line is also appreciated at the bottom, where the flag also protrudes.

Dean Winchester (Jensen Ackles, Supernatural) in a Split Depth GIF
Dean Winchester (Jensen Ackles, Supernatural) in a Split Depth GIF

The lines do not necessarily have to be white, but it has been established as a frequent color, since most of the pages where the images are placed have a white background, so it blends better with it.

4. How can I create a SplitDepth GIF?

It really is very simple, you do not need great knowledge, but depending on the case it can be (or not) somewhat laborious.

Before we start, we will need a small fragment of the sequence to use in GIF format. We can use an online tool, such as Imgur VidGIF, which enables extract streams from Youtube videos in animated GIF simply indicating the direction of the YouTube video, or on the other hand, use a program like GifCam, Instagiffer or QGifer which we already talked about in the article How to create animated GIFs without dying trying. Try to use sequences that are not too large, otherwise the resulting GIF will be gigantic.

Naturally, the quality of the SplitDepthGIF The result will depend on the cunning and dexterity of the creator with the mouse and the dividing lines. However, to simplify the creation of the animated GIF as much as possible, we are going to use a tool designed specifically for this purpose: Split level (requires Java installed). It is created by L77, and in it we will load the Animated GIF of the sequence in question:

Add white lines in animated GIF with Split Level
Add white lines in animated GIF with Split Level

As we can see, the tool itself will be in charge of adding the dividing lines automatically, being able to modify the position of each one using the controls below. Line Position. We can also modify their thickness using the slider Line Thickness, or the color by placing the hex code desired in Line Color.

The first thing we must do is fix the position of the lines, since once we begin to erase them in the frames there will be no going back. To do this, we can move through the animation frames using the buttons Prev Frame and Next Frame and decide in which position they would be better. You must place the lines in a place where, at some point, they are behind the object that we want in the foreground (hands with guns in this example). We can also play the current animation by pressing the button Play, where we are also shown the frame in which we are currently:

Move Between Frames of an Animated GIF in Split Level
Move Between Frames of an Animated GIF in Split Level

Note: It is possible that as we advance between frames, we will see the images as they can be seen in the circle in the previous image. No error occurs, this is because of the way animated GIFs work, which they set to transparent (White) pixels that do not vary from the previous frame. If this bothers you when retouching the image, you can use ImageMagick to eliminate this behavior:

convert imagen-original.gif -coalesce imagen-limpia.gif

Of course, if you carry out this operation, I advise optimizing the Animated GIF end with some tool like GifSicle or GifCam (mentioned in the article how to create animated GIFs).

5. Add white lines to animated GIF

We have reached the critical part of creating the SplitDepthGIF. We have the animated sequence with the lines in place, but at the moment they are always superimposed on the image. We can only “erase” the lines in the keyframes to make it appear that the object is in the foreground.

For this we will create a mask, which is nothing more than an area where the white lines will be erased. We will use the controls marked in the following image:

  • Draw Mask: Used to draw the mask (deleted line) of the objects we want to give depth (in this case, the hands and guns).

  • Erase Mask: If we have been confused in the previous step and we have eliminated more than necessary, we can use this option to do the reverse step and redraw the line.

  • Clear Mask: Simply erase the mask from the frame and leave the lines intact again. Useful if you are wrong.

Add mask with white lines in animated GIF (Split Depth GIF)
Add mask with white lines in animated GIF (Split Depth GIF)

The box Show Mask shows the mask in red. We can uncheck this box to see the final result without the red color (as in the circle in the previous image). In addition, we can also increase or decrease the size of the cursor with the slider Brush Size.

Here you can see the final result: Pulp Fiction SplitDepth GIF, on Gfycat

Eye: Before you start making your own 3D animated GIFPlease read the following tips for crashes that usually occur the first few times you make a SplitDepthGIF:

6. Tip: Copy the mask from the previous frame

When we start to create these kinds of animated GIFs, we don’t usually pay much attention to the masks, creating them separately in each frame. The best option is to create the mask of the first frame, and once the we are done, we press the button Copy Mask, which will copy the current mask clipping we created to the next frame.

This will make the creation much more comfortable, only having to retouch certain details in each frame, and avoiding flickering (flicker) that happens when we make each frame independently:

Example with flicker: Terminator 2 SplitDepthGIF with flicker default, in Gfycat

7. Tip: Make changes per frame

Another tip when creating SplitDepthGIF is to modify all the items in the frame at once. For example, in the animation of Pulp fiction, you have to create a mask of two items (Vincent’s hand and Jules’s hand). With this tool we must make the two modifications before copying the mask, since otherwise we will not have any way to modify the already created masks (overwriting the work done).

8. Tip: Use the “brush” mode

By default, the tool incorporates a brush that, when erasing the dividing lines, makes it look aliasing (sawtooth effect). We can activate the option Brush mode to switch to a mode in which this behavior is softened, resulting in more elegant cuts.

9. How can I hide the GIF jump?

On many occasions we may want to ensure that our “animated loop” does not present a jump when the animation ends and returns to the first frame, and instead get a smooth animation, which returns to its initial state as if it were an infinite loop.

This is often very difficult (yes not impossible), however, what we can do and it is much simpler, is to repeat the animation in reverse order (as in our previous Pulp Fiction example). A tool that allows you to do this very easily is GifCam. Just load the animated GIF in question, press the button Edit and then, with the right button, select the option Add Reverse Frames.

tip: Perform this trick when you have finished the masks for the dividing lines of the SplitDepthGIF, so as not to have to do double the work.

“Add Reverse Frames” adds the reverse animation to the end of the GIF

10. Where can I upload large animated GIFs?

Well. After a while struggling with dividing bars, we have finally finished our SplitDepthGIF. Now … where can I upload it? You have several options, among which the following two stand out

Upload animated GIFs to Imgur or Gfycat
Upload animated GIFs to Imgur or Gfycat
  • Imgur: The first and most famous is Imgur, a popular image-sharing website, which also allows you to upload animated GIFs up to 2MB (3MB if you are registered).

  • GfyCat: If your animated GIF is gigantic and takes up more than 3MB (something very common in animated GIFs), do not worry. You can upload it to GfyCat, a website that transforms Animated GIFs on video WebM allowing them to be reproduced using HTML5 and considerably reducing their size and loading time. And don’t worry about the size, here’s an awesome 330MB animated GIF.

Now that you know how to create your own SplitDepthGIFDo you dare to create one, upload it and add it in the comments? You can find many more by searching SplitDepthGIF on Google or in Reddit.