Set up Bodymovin for After Effects

Bodymovin is an open, no-cost extension that allows you to export After Effects compositions as JSON documents for embedding in websites and integrating into apps. Let’s delve into the process of initializing the Bodymovin extension.

We will accomplish this in four simple steps:

1. Acquire the Bodymovin extension
2. Confirm After Effects settings
3. Generate an animation
4. Integrate the animation into a website

1. Acquire the Bodymovin extension

Visit Adobe Exchange and download the complimentary Bodymovin extension.

Note: Ensure that you are logged into the correct Creative Cloud account if you have multiple subscriptions, to easily locate the extension in the subsequent step.

2. Confirm After Effects settings

Launch After Effects and locate Bodymovin within the Window > Extensions menu.

If Bodymovin is not visible, attempt restarting After Effects.

To ensure proper file access permissions, navigate to After Effects > Preferences > Scripting & Expressions (Edit > Preferences > Scripting & Expressions on Windows).

Locate Allow Script to Write Files and Access Network and ensure that it is enabled. 

3. Generate an animation

Let’s export a composition using Bodymovin.

Open your animation in After Effects and access Window > Extensions > Bodymovin to export the animation along with any other compositions for rendering. 

Note: Enable compression in the Settings menu if your composition contains rasterized images. 

Check the designated folder and save the JSON file before exporting by clicking Render.

Upon completion of the rendering process, you should now possess a JSON file in the specified folder. Next, we will insert the animation into the website. 

4. Integrate the animation into a website

For this step, we will utilize Webflow, but the approach remains consistent whether hand coding or leveraging an alternate platform. 

From the left panel’s Assets section, drag the animation onto your layout. 

That’s all! Upon publication, export, or preview, your animation should play automatically. 

If you haven’t already, explore our comprehensive After Effects & Lottie in Webflow course. 

Visit Airbnb’s Lottie site to view their current list of supported After Effects functionalities.