Bodymovin Plugin After Effects Link
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' );
// 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 . 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
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. Editable text requires embedding custom fonts, which is