- Infinite Gif -
Synopsis
This tutorial will show you how an infinite gif functions and how to create one, to the left you will see a typical gif animation with nothing exciting and to the right, one that gives the appearance of being continuous.
I searched how to create such animations but every tutorial I found online were always using adobe programs or other shitty proprietary software and didn't actually explain what was going on so I figured it out myself, I thought it would be helpful to share this knowledge.
How does it work?
As we can see to the left, a typical gif animation has a starting frame and an ending frame. Most people don't bother making the pixels at the end frames gradually match the starting frame. This causes the noticeable change in pixels when the gif starts over.
Let's say you wanted to create a seamless gif like the one I've shown to the right, you would need to copy the top pixels the full width of the resolution of the first layer (starting frame) and paste the pixels to the bottom of a layer towards the end of the animation, remember, you don't start by putting those directly on the end frame.
The reasoning behind this is you need to have some headroom in order to let the end frame have what looks closest to the starting frame. Obviously if you only give it one row of pixels, it won't look anything like it.
You need to repeat this process but rather than one row of pixels being pasted, you copy two rows off the first frame and paste them onto the next frame towards the end of the animation. You need to keep this up and gradually increase the amount of pixel rows you select until it's complete, this essentially removes the noticable sudden change of pixels.
This concept also applies if your animation moves in any direction however, keep in mind that the specifics of the steps WILL vary and be dependent on the direction of your animation. Use your brain while keeping this concept in mind and everything should be fine, baaaah!
Tutorial
To start, you'll need an image editor of your choice, I personally used GIMP because it's free and open source. My version is 2.10.38 in case of future UI changes. This entire process requires quite a lot of steps, if you plan on using GIMP to follow along but aren't familiar with the program, good luck.
You'll see below that I have made a 64x64 image that I will turn into a gif, my final gif will only be 16x16 which is small for the sake of simplicity.
To create a gif in GIMP you need to have layers which names are only numbers which increment. We start with 1 and then go up to however many frames you wish to have.
Everytime a frame was created, I took the 64x64 image and moved it up by a pixel. You can move it up however many pixels you like but I chose increments of 1 so my animation appears smooth. Here's how it looks.
The white square and the dot indicates the center 16x16 area that I will use for my gif animation and are only there for the sake of comprehension.
If you are using GIMP, you can select the area you wish and then in the top bar of the program under the category "Image" you can select the option "Crop to selection" which will crop every frame to your selected area.
Down below you will see I have upscaled the 16x16 gifs to 64x64 so they are easier to view, here's how the gif without the effect looks.
Down below, you will see a dark section to the left, those are the pixels I have copied from the top of the first frame and pasted to the bottom of the frames towards the end of the animation.
You can think of the dark section as a buffer for the start of the gif, we successfully made it so the ending frames gradually incorporate pixel rows from the starting frame, leading to the effect of uninterrupted movement.