After Effects __hot__: Bodymovin Plugin

Bodymovin: Revolutionizing Motion Design Workflows through JSON-Based Rendered Animation

Linear and radial gradients in After Effects often render with different color stops or angles in Lottie-iOS vs. Lottie-web due to differing interpretation of gradient matrices.

"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": [...] ] bodymovin plugin after effects

// Runtime control animation.play(); animation.setSpeed(0.5); animation.goToAndStop(60, true); A critical understanding for motion designers is that Bodymovin does not support 100% of After Effects .

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. Instead of a CSS-animated spinner, Slack uses a

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.

import lottie from 'lottie-web'; const animation = lottie.loadAnimation( container: document.getElementById('anim-container'), renderer: 'svg', // 'svg', 'canvas', or 'html' loop: true, autoplay: true, path: 'data.json' ); In After Effects

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. 8. Limitations and Criticisms 8.1 The "Matrix of Pain" The lack of expression support is the most common designer complaint. In After Effects, a designer might use time*360 to rotate a wheel infinitely. Bodymovin will ignore this, requiring the designer to create a 1-second loop cycle or use the Lottie API to manually drive rotation.