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?
: Colors are wrong Fix : Check color profile – use sRGB. Avoid blending modes like Screen/Multiply.
<script> const animation = lottie.loadAnimation( container: document.getElementById('lottie'), renderer: 'svg', // 'svg', 'canvas', 'html' loop: true, autoplay: true, path: 'animation.json' );
: Text not showing Fix : Convert text to shape outlines (Right‑click layer > Create > Create Shapes from Text) – but then text cannot be changed dynamically.
// 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()
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?
: Colors are wrong Fix : Check color profile – use sRGB. Avoid blending modes like Screen/Multiply.
<script> const animation = lottie.loadAnimation( container: document.getElementById('lottie'), renderer: 'svg', // 'svg', 'canvas', 'html' loop: true, autoplay: true, path: 'animation.json' );
: Text not showing Fix : Convert text to shape outlines (Right‑click layer > Create > Create Shapes from Text) – but then text cannot be changed dynamically.
// 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()
