Bodymovin Extension May 2026

: Colors are wrong Fix : Check color profile – use sRGB. Avoid blending modes like Screen/Multiply.

: Text not showing Fix : Convert text to shape outlines (Right‑click layer > Create > Create Shapes from Text) – but then text cannot be changed dynamically. bodymovin extension

<script> const animation = lottie.loadAnimation( container: document.getElementById('lottie'), renderer: 'svg', // 'svg', 'canvas', 'html' loop: true, autoplay: true, path: 'animation.json' ); : Colors are wrong Fix : Check color profile – use sRGB

import LottieView from 'lottie-react-native'; <LottieView source=require('./animation.json') autoPlay loop /> Flutter Lottie.asset('assets/animation.json', repeat: true) 8. Optimizing Performance & File Size | Problem | Solution | |---------|----------| | Large JSON | Use JSON compression in export; run through json-minify | | Too many keyframes | Reduce frame rate to 30 or 24 (instead of 60) | | Complex shapes | Simplify vector paths (fewer points) | | Many layers | Merge static shapes into one shape layer | | Images | Keep images small (<100KB); prefer vectors | | Slow on mobile | Use canvas renderer instead of SVG | 9. Common Issues & Fixes Issue : Animation looks broken in Lottie Fix : Remove unsupported effects or layer styles. Use “Purge All Memory” in AE and re‑export. &lt;script&gt; const animation = lottie