Bodymovin Plugin After Effects Jun 2026

Developed by Hernan Torrisi, Bodymovin represents a paradigm shift in how designers and developers approach animation. It is an After Effects plugin designed to export animations as JSON files, rendering them natively on the web and mobile devices using the Lottie library. Before Bodymovin, implementing a complex vector animation on a website often meant using the GIF format, which resulted in pixelated edges and massive file sizes, or coding the animation by hand using CSS or JavaScript—a time-consuming process that often failed to capture the nuance of a designer's vision. Bodymovin solved this by allowing designers to work in their native environment, After Effects, and have their work translated directly into code.

When paired with the Airbnb Lottie Web Library, these JSON files render natively as real-time HTML SVG or Canvas elements. This ensures animations remain infinitely scalable, retain sharp vectors on high-resolution screens, and load almost instantly due to minimal file sizes. Step-by-Step Installation Guide

If you downloaded the .zxp file manually from GitHub or aescripts, you will need an external installer: bodymovin plugin after effects

Bodymovin functions as a script extension within After Effects. When a user clicks "Render," the plugin traverses the After Effects project’s Abstract Syntax Tree (AST). It serializes the following properties into a JSON object:

Instead of a CSS-animated spinner, Slack uses a Lottie animation of its logo bouncing and wiggling. The JSON file is 12KB vs a 300KB GIF. Developed by Hernan Torrisi, Bodymovin represents a paradigm

For decades, Adobe After Effects has stood as the industry standard for motion graphics and visual effects. It is a powerhouse capable of creating stunning cinematic visuals, yet historically, it existed in a silo separate from the interactive world of the web. Traditionally, an animation created in After Effects was rendered into a video file—a static, non-interactive sequence of frames. However, the rise of mobile applications and the demand for high-performance web animations necessitated a bridge between the design capabilities of After Effects and the programmatic flexibility of the web. That bridge is the Bodymovin plugin.

// Runtime control animation.play(); animation.setSpeed(0.5); animation.goToAndStop(60, true); Bodymovin solved this by allowing designers to work

import lottie from 'lottie-web';

Acquire the plugin directly via the Adobe Exchange Marketplace .

To ensure fidelity, designers must convert text to shapes before export. This destroys editability and increases file size exponentially (each letter becomes a set of paths). Editable text requires embedding custom fonts, which is legally and technically complex.