I can create stop motion animation using Inkscape similar to what I did with Canva. Since Inkscape is free it’s a perfect stop motion maker to use. To test my stop motion animation idea I created a simple Inkscape template with the layout of the graphics to be animated. Since stop motion animation is a well know process; anyone using Inkscape can do this with a little planning and patience. Here is the process I used for creating an Inkscape animation based on steps of stop motion animation.
Stop motion animation techniques have been around awhile.
FYI, early movies and cartoons used this process of taking a person or element and photographing it many times while slightly changing the object’s position. Sequencing the resulting images would animate the object, making it appear as though it was moving.
This process is one simple way to create an Inkscape animation; this technique can be used to create an animated Pinterest pin, Instagram story, animated logo or an animated logo as an introduction to a youtube video and there are probably other uses for this that I haven’t thought of. To create a 5-second animated gif I create around 30 still images; I’ll call each image a “frame”. Let me demonstrate the process of creating an Inkscape animation for a Pinterest rich pin (735 x 1102 pixels). If I made it into an Instagram story I’d just resized the still images into 1080 x 1920. I mention Instagram stories because Instagram stories allow an Https link back to a website while Instagram only allows an https link in the Instagram bio page. So using Inkscape to create interesting 5 or 10 second clips would be an eye-catching Instagram traffic generation technique. It does take time and there are certainly other methods available, but if you’re a savvy Inkscape user I could see the possibilities here. Whatever ultimately gets made, it’s a matter of creating the correct dimensions for the final product. As I mentioned, Pinterest requires an aspect ratio of 2:3 or 600 x 900 pixels or 735 x 1102 pixels where Instagram stories are 1080 x 1920 pixels.
Here’s the step by step method I use for creating the animation.
Inkscape animation example
1 – Create the basic still image layout or initial frame in the dimensions needed.
The frame is the overall size and dimensions of the animation. The frame includes the background and all the text and graphics placed into the correct dimensions. Each still image becomes one frame in the animation. To keep it simple, in my example I want to create a stop motion Inkscape animation for Pinterest. My initial “template” size for the animation frames is 735 x 1102 pixels; while Inkscape lets me shrink and resize anything I’ll make my frames exactly 735 x 1102. If I don’t then when I go to save the frames and compose the animation I’ll have to resize to get the animation in the Pinterest dimension and that would be a lot of extra work.
I suggest you either create your graphic objects or import free ones. I’ve chosen to import 3 free graphic elements, 2 were free and 1 I created. I found a nice free picture on Pixabay and used GIMP to crop it into a circle; that quick edit took less than a minute to do. I then imported the image for use in the animation.
2 – Add-in the design background, text and object(s) to be animated.
The object should be placed in the initial starting position. In this example, my animation will consist of several elements: an arrow, a heart, a cupid and an image with some text. It’s very important to make sure that the elements stay relative from one frame to the next otherwise if they move up or down slightly the final animation with bounce and be jittery. So to place everything correctly I’ll add them to the frame in the starting positions and use vertical, horizontal and diagonal guides within Inkscape to help line up the elements from one frame to the next. Once all 30+ frames are created, I’ll clean up the images by deleting what I don’t need in each frame rather than trying to add in the correct places. This is not hard to do but it does take patience.
3 – Adding guidelines or locators for repositioning the animation along the path it will move.
As I mentioned the guides are there to prevent bobbing or jittery in the animation; plus, I use the guides to “slide” the object being animated along the guideline through each “frame” of the animation. For example, I’m using a diagonal guide to move the arrow from the cupid to the heart. I also use a vertical guide to move the small hearts from the top of the image to the bottom.
4 – Copy key frames then change the placement and opacity of the objects in each frame to create the stop motion animation.
Again, the goal is to create a minimum of 30 total frames. Without getting into the technical details of why, I’m stating for this demo that’s the minimum number of frames to roughly make a 5 second animated GIF. The more frames you create the smoother the animation will be but the longer it will take to create in Inkscape. In this example I have 4 key frames: 1) the starting frame, 2) frame where the heart changes, 3) frame where the circle with hands begins to show and 4) the final frame with a message. The transition from one key frame to the next uses both movement of and changes in transparency or opacity of object as the stop motion progresses.
5 – Modify the object(s) being animated by moving it along the guideline and increasing or decreasing transparency.
From frame 1 to about frame 7, the changes in position are done using guidelines. This transition is the movement of the arrow. The next transition starts when the heart changes into multiples and the multiple begin to fall down along a vertical guide. The cupid fades from frame to frame by decreasing transparency to 0 and then deleting it in the rest of the frames. The circle with the hands and lower message begin to show by increasing the transparency from 0 to 100. The final four or five frames contain the complete message.
NOTE: A critical key concept when creating the SVG animation file is to use both guidelines and the align and distribute function. This keeps objects lined up relative to each other while moving key objects from frame to frame.
Now here are the frame in the order needed as shown in Inkscape. Each still image or frame needs to be saved individually as a JPG or PNG file. I recommend all the elements in the frame be grouped before exporting in Inkscape; Inkscape seems to work better than way. Although I have guidelines on my Inkscape workspace I also use groups with the Align & distribution options to help line up objects within each frame respective to the other frames. The next step is to create the final animation.
Free Animation Software Tool
I’ve found 3 easy options for stop motion animation software tools that are free. Here I’m using a free stop motion animation app for Mac called “Adapter“; I like it because it’s a stop motion animation tool that creates both video or audio animated Gifs. In my previous article on Canva animations, I used Imgflip and Canva; in comparison to Adapter, both of these are free online stop motion animation tools. However, Imgflip does leave a watermark on the animation unless you paid a small fee but Canva does not. Still, both work well and are super easy to use. My point is that there are multiple options to easily create an animation effortlessly.
If you are a Mac user you can use any of these options; if you’re a Windows user you won’t be able to use Adapter but you can use Canva or Imgflip. (Check out my Canva article if you need info on either of those). If I wanted an mp4 video file instead of an animated gif I’d use Handbrake which is a truly awesome free tool that works on Windows, Linux or Mac
So to use Adapter, I open the program and drag my image (in the order desired). To get a resulting animation the settings in Adapter need to be slightly modified as I’ve shown below. The animation can be spe up or slowed down but too much of one or the other will make the result look a bit jerky. If you tinker with the settings in Adapter, you will soon see what I am describing.
Here’s the final animation; I’ve included my brand pin style as an introduction. I’m currently testing this same process on using my logo and animating a 2-5 second clip as an intro for my youtube videos so you can see that this has potential. It’s a simple process compared to a complex program like Blender or Adobe’s After Effects. This process doesn’t replace those programs; they have so many great features, but if you needed a quick animated gif or very short clip and didn’t want to learn a more complex program for one simple need, this technique would certainly be a choice to try.
And that’s how you can make Inkscape animations for Pinterest pins, Instagram stories or even animated logos.
If you found this useful, please consider sharing it.