After Effects | Bodymovin Plugin
In 2017, Airbnb’s engineering team recognized the potential of Torrisi’s work but identified a lack of mobile support. They forked the project, created the Lottie name, and developed three native rendering engines:
The is the industry-standard tool used by motion designers to export complex vector animations into lightweight, code-based Lottie JSON files . Developed by Hernan Torrisi, Bodymovin bridged the gap between motion design and web development by removing the reliance on heavy GIFs or complex code. This guide explains how to install, configure, and optimize Bodymovin to create high-performance UI and web animations. What is Bodymovin?
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: bodymovin plugin after effects
If you downloaded the .zxp file manually from GitHub or aescripts, you will need an external installer:
A typical Bodymovin JSON file contains assets, layers, and animations. Example structure: This guide explains how to install, configure, and
Journalistic features use Bodymovin exported animations triggered by scroll events (using Lottie-interactivity). Charts and diagrams animate as the user scrolls, syncing precisely to scroll percentage.
"v": "5.9.6", // Version "fr": 30, // Frame rate "w": 500, // Width "h": 500, // Height "layers": [...], // Array of layer objects "assets": [...], // Images or pre-comps "layers[0].shapes[0].it": // Shape path data "ty": "sh", "ks": "k": [ "i": [...], "o": [...], "v": [...] ] When a user clicks "Render," the plugin traverses
Traditionally, bringing an animation from Adobe After Effects to a website or mobile application meant exporting it as an MP4 or a heavy GIF. Bodymovin changes this workflow by parsing After Effects layers and exporting them as a .
Bodymovin: Revolutionizing Motion Design Workflows through JSON-Based Rendered Animation
