Can a custom Lottie animation be created using different 3D animating software and then rendered on After Effects with a plug-in to convert it into a Lottie.Json file, without using Cinema 4D?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Yes, it is possible to create a custom Lottie animation using different 3D animating software and then render it on After Effects with a plug-in to convert it into a Lottie.Json file, without using Cinema 4D. Here's how you can do it:

Choose a 3D animating software:

Blender: A free and open-source option that offers powerful 3D capabilities.
Maya: A professional-grade software widely used in the industry.
3ds Max: Another professional-grade software known for its robust 3D animation features.

Create your animation in the chosen software:

Use the features and tools available in the software to create your 3D animation.
Ensure that your animation adheres to the technical requirements for Lottie animations, such as animating all properties that need to be animated and adhering to timing and keyframe specifications.

Export the animation from the 3D software:

Export your animation in a file format supported by After Effects, such as FBX or OBJ.
Ensure that you maintain the integrity of the animation during the export process.

Import the animation into After Effects:

Open After Effects and create a new composition.
Use the File > Import File option to import the exported animation file into After Effects.
Ensure that the animation is correctly imported, and the keyframes are intact.

Install the Lottie Bodymovin plugin:

Download and install the Lottie Bodymovin plugin for After Effects.
This plugin allows you to export your After Effects composition as a Lottie animation.

Convert the animation to Lottie.Json:

With the plugin installed, you can now export your composition as a Lottie.Json file.
Select the composition in the After Effects project panel.
Go to File > Scripts > Bodymovin.

Customize the export settings:

In the Bodymovin panel, you can customize various settings for the Lottie export, including size, frame rate, and compression.
Make the necessary adjustments based on your requirements.

Export the composition as a Lottie.Json file:

Click the "Render" button in the Bodymovin panel to start the export process.
Choose a location to save the Lottie.Json file and click "Save."

Use the Lottie animation:

You can now use the Lottie.Json file in your Webflow project.
Import the Lottie animation into Webflow by following the standard process of adding animations to your website.
Depending on your requirements, you can use interactions or embed the Lottie animation directly on your website using the HTML embed element.

By following these steps, you can create a custom Lottie animation using different 3D animating software and render it on After Effects without relying on Cinema 4D.

Additional questions:

How can I create a custom Lottie animation using Blender?
What are the technical requirements for Lottie animations?
How do I import a Lottie animation into Webflow?

Do you know how to implement the code to automate open/closing hours in Webflow if you want to use it twice for two different places with different sets of hours?

Is there a way to force iPhones with extra long screens, like the iPhone X/XS/XR series, to display in the Mobile-Landscape breakpoint on Webflow instead of the Tablet (Portrait) breakpoint?

Can changes in style of H1, H2, H3... elements affect the design in a blog post that is already ready in Webflow?

Is there a bug with custom domains in Webflow that causes a form to redirect to a Mailchimp hosted form instead of showing an inline success message?

How can I incorporate a different video content portion from one of the templates provided in Webflow into the 'Artists' Page of the premade template I purchased?

Can you seamlessly integrate a custom code shipping calculator in Webflow that calculates shipping costs based on distance from a store to the destination, with a minimum charge?

Can I change the background color of a dropdown toggle in Webflow using custom code and target its class based on the open status?

What is the purpose of the provided code in relation to Webflow's limitation on nested collection lists inside symbols?

In Webflow, how can I display all 167 countries from a collection list on the front-end of my project when only 100 are being shown?

How do I fix the AAAA record error when connecting a custom domain in Webflow?