Extension [repack] - Bodymovin

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.

<script> const animation = lottie.loadAnimation( container: document.getElementById('lottie'), renderer: 'svg', // 'svg', 'canvas', 'html' loop: true, autoplay: true, path: 'animation.json' ); bodymovin extension

// Control animation.play(); animation.pause(); animation.stop(); animation.setSpeed(0.5); animation.goToAndStop(60, true); </script> iOS (Swift) let animationView = AnimationView(name: "animation") animationView.loopMode = .loop animationView.play() view.addSubview(animationView) Android (Kotlin) LottieAnimationView(context).apply setAnimation("animation.json") loop(true) playAnimation() Use “Purge All Memory” in AE and re‑export

Would you like a step‑by‑step example of creating a specific animation (e.g., a loading spinner, a button hover effect, or an icon transition) from AE to live web? Avoid blending modes like Screen/Multiply

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