Sometimes I look at Gifs and I am just starstruck. The transitions are perfect, unnoticeable changes in the objects and backgrounds and the loop is just fluid without flaw.
When I find a Gif like that I look at it very closely. Not to copy it, but to understand the mechanics behind it. When do they switch from one composition to the other, which objects remain, which scale up? Usually, though, it is really difficult to see, especially with the speed that an animation has.
Here is a quick tip: When it’s a Gif (and not a web animation with svgs or similar) you can simply hold the image, pull it to your desktop and let go (or save it the conventional way with a right click). Gifs only play in a browser interface so when you download them, they are saved as the individual images that make up the Gif. When the Gif still plays in your preview, double click it to open up the images it contains. For me on a Mac that’s with the preview app where I can then scroll down on the individual transitions I am interested in.
And while it obviously does not show you the way it was built, you can look at it frame-by-frame. To me, that is SO HELPFUL. And inspiring. And just fun to see, to be honest 🙂
I created this Gif by looking at another Gif I have seen online. Since I really liked that line-transition, I followed the aforementioned process and built it.
As you can see when you try downloading it for yourself, the letters are smashed together more than the kerning would allow. So I figured I needed to scale down the word horizontally, too, to make it smooth. Here’s the result:
It does not only work on transitions but naturally also on animations of fire, of movement of people and more!
What do you think about this little trick? Has it helped you before? Do you have another trick to help you with Gif transitions?