Today we want to talk about how we can create Lottie animations from Blender.
As we mentioned in our previous article: How to Add Lottie Animations to Your WordPress Website, Lottie is a library that offers JSON-based animations with remarkably small file sizes, making them easily usable across various platforms.
The most recommended way to create Lottie files, both for convenience and compatibility, is by using Bodymovin in After Effects. However, in this article, we’ll share an alternative method that we’ve found quite effective.
As you may know, Blender is a powerful software primarily used for creating 3D animations. However, it also provides the ability to create 2D animations using the Grease Pencil feature, , which for the practical purposes of this article, will be the one we will use below.
Bouncing ball animation
To start, open Blender and select the 2D Animation environment. You can also access it from the menu by going to File -> New -> 2D Animation.
Once there, you’ll notice that you’re in Draw Mode. Select the brush you want to use for your lines, ranging from Airbrush to Smooth Pencil. For this example, we’ll choose the Pen.
As the animation we are going to create is a bouncing ball, we will use the Circle tool to create the ball.
Since we want the ball to have a fill color, select the Solid Fill option and choose a color for it.
Essentially, what we’re doing is defining a material for our shape. If you move your cursor, you’ll notice that technically, we’re working with a 3D object in a 2D context.
Next, create a circle by holding the Shift key to maintain its proportional size.
Now, switch to Edit Mode, where we’ll make the necessary adjustments to our circle to create our animation.
To create the illusion of speed, we’ll assign increasingly distant positions to the ball in each frame. To do this, we’ll use well-known shortcuts. In this case, press G + Z to move the circle downwards.
Also, to create the bouncing effect, we will stretch and squash the ball, which will help generate a smoother animation. Press S + Z to scale the circle up and down and S + X to scale sideways.
Afterwards, we will return the ball to its initial position. The approximate total number of frames in the animation will be 24.
Now, switch back to Draw Mode to add a support structure resembling the floor. To do this, add a new layer called “floor.”
With the Line tool selected, move to frame 10, and choose the Solid Stroke material. Then, draw a line that covers the space where the ball is completely squashed.
Next, go to the newly created frame 10, and use the Shift + D keyboard shortcut to duplicate the frame. Place one duplicate at the beginning (frame 1) and the other at the end (frame 24).
Great! With this, we have created our animation.
To export it as a lottie animation, there is an addon created by Mattia Basaglia (https://gitlab.com/mattbas/python-lottie) that works really well.
However, there is an issue with exporting animations that have filled elements. Unfortunately, in Blender versions 3.4 and 3.5, which we have tested, filled elements are exported with a flickering effect that is not present in the created animation.
Despite this drawback, the addon remains an excellent resource, and it is possible that this issue will be resolved in the future.
So, to render the animation, we’ll save it as a video. Go to the Output Properties option and change the output format from PNG to FFmpeg Video.
Once you do that, you’ll notice that the Encoding option appears. Expand it and choose MPEG-4 as the container format.
Before rendering the animation, if you want to modify its size, you can do so under the Format panel. Similarly, you can change the output location in the Output section.
To render the animation, click on the Render Animation option in the Render menu.
Converting to Lottie Animation
Once you have the MP4 file, you can use a service called Video to Lottie Converter, an online tool developed by Isotropic, LLC. It’s quite intuitive to use and can be accessed through the following URL: isotropic.co/tool/video-to-lottie.
On the tool’s page, you’ll see a form that allows you to upload your MP4 file exported from Blender. After entering the necessary values, click on the blue Encode! button. Once the process is complete, the JSON file will appear below. Simply click on the file name to download it.
Testing Lottie Animation
To test the animation and verify that it is a JSON file compatible with the Lottie library, you can upload the JSON file to : app.lottiefiles.com/preview and see it in action. Afterwards, you can implement it on your website.
And that’s it! We hope this information is useful and helps you create fantastic animations that enhance the user experience on your website.
Here is the video with the complete process:
Thanks for reading, see you next time.