Title: Bodymovin: Revolutionizing Motion Design Workflows through JSON-Based Rendered Animation Author: [Generated for User] Publication Date: April 14, 2026 Field: Digital Motion Graphics, Front-End Web Development, UX Engineering
Abstract The digital animation landscape has long been segmented between high-fidelity, non-interactive video formats (MP4, GIF) and programmatically performant but visually limited web animations (CSS, vanilla JavaScript). Adobe After Effects, the industry standard for motion design, produces assets that are traditionally difficult to export for live, scalable, and interactive web environments without significant file size overhead or quality degradation. The Bodymovin plugin , developed by Hernan Torrisi, bridges this gap by converting native After Effects vector animations into lightweight JSON (JavaScript Object Notation) files. These files are then rendered on the client-side via the Lottie-web library (and its derivatives: Lottie-iOS, Lottie-Android). This paper provides a comprehensive technical analysis of the Bodymovin plugin, examining its architecture, export capabilities, limitations regarding unsupported After Effects features, performance benchmarking against traditional video formats, and its impact on modern UI/UX design systems. We conclude that Bodymovin has fundamentally altered the pipeline for motion graphics production, enabling resolution-independent, interactive, and programmatically controllable animations at a fraction of the memory footprint of traditional video.
1. Introduction Since its release in 1993, Adobe After Effects has been the preeminent tool for compositing and motion graphics. However, a persistent problem has plagued the industry: the "last mile" delivery of animations to non-linear, interactive platforms—specifically web and mobile applications. Historically, designers rendered animations as video files (MP4/WebM) or GIFs. These formats suffer from three critical failures:
Resolution dependence: Scaling a video above its native resolution results in pixelation. File size bloat: High-fidelity, long-duration animations result in multi-megabyte files detrimental to load times. Interactivity: Videos are passive; they cannot respond to hover states, scroll events, or API calls. bodymovin plugin after effects
In 2015, the introduction of the Bodymovin extension (now commonly referred to as the Lottie ecosystem following Airbnb’s adoption) solved these problems by rendering animations as vectors in real-time using the host platform’s native rendering engine. 2. Historical Context and Development 2.1 Genesis of Bodymovin The plugin was initially developed by Hernan Torrisi as an experimental tool to export animations from After Effects to Canvas API. Torrisi reverse-engineered the way After Effects stores shape data and transformed it into a structured JSON schema. 2.2 Airbnb’s Lottie (2017) 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:
lottie-web (JavaScript) lottie-ios (Core Animation/UIKit) lottie-android (Canvas/OpenGL)
Airbnb hired Torrisi to maintain the ecosystem. Today, "Bodymovin" refers to the After Effects exporter , while "Lottie" refers to the player/renderer . 3. Technical Architecture 3.1 How Bodymovin Parses 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: These files are then rendered on the client-side
Hierarchy: Composition structure, pre-compositions, and parenting. Shapes: Paths, Bezier curves, polystars, rectangles. Transforms: Anchor points, position, scale, rotation, opacity. TrkMat (Track Mattes): Alpha and inverted alpha mattes. Effects: Limited to specific supported effects (e.g., Fill, Stroke, Drop Shadow, Radial Wipe). Keyframes: Interpolation types (Bezier, Hold, Linear) and easing curves.
3.2 The JSON Schema A typical Bodymovin JSON file contains assets, layers, and animations. Example structure: { "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": [...] } ] } } }
The vector data is stored as cubic Bezier vertices ( v ), incoming tangents ( i ), and outgoing tangents ( o ). The Lottie player on the target platform parses this JSON and redraws the vector frame-by-frame using the platform’s native graphics API. 4. Workflow Integration 4.1 Installation 4.2 Export Settings
Download from the official Exchange or aescripts. Install via Adobe Creative Cloud Desktop or manual .zxp installation. Accessible via: Window > Extensions > Bodymovin .
4.2 Export Settings