Bodymovin Plugin After Effects -

"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": [...] ]

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' ); bodymovin plugin after effects

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. "v": "5

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

// 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 .