Bodymovin

1. What is Bodymovin? Bodymovin is a groundbreaking extension for Adobe After Effects that exports animations as JSON (JavaScript Object Notation) files. These JSON files can then be rendered natively on web (HTML5/Canvas/SVG), mobile (iOS/Android), and other platforms using the open-source Lottie rendering engine.

// Optional: add event listener animation.addEventListener('complete', () => console.log('Animation finished'); ); </script> Dynamic properties at runtime: // Change a specific color inside the animation (if layer named "circleFill") animation.addEventListener('DOMLoaded', () => const colorLayer = animation.getLayer('circleFill'); // custom naming in AE colorLayer.fillColor = [0.2, 0.5, 1.0]; // RGB 0-1 ); Seek and play from code: animation.goToAndStop(30, true); // frame 30 animation.setSpeed(1.5); animation.pause(); animation.playSegments([10, 45], true); 10. Alternatives to Bodymovin | Tool | Format | Use case | |------|--------|----------| | Rive | .riv | Real-time, interactive, state-machine animations | | SVGator | SVG + CSS/JS | Simple web animations | | CSS keyframes | CSS | Lightweight, no external library | | APNG / WebP | Animated images | Raster animations with transparency | | Spine | .json + atlas | Character/ skeletal animations (games) | bodymovin

| Platform | Library | Notes | |----------|---------|-------| | Web (HTML/JS) | lottie-web | Supports SVG, Canvas, HTML renderers | | iOS | lottie-ios | Native Core Animation rendering | | Android | lottie-android | Canvas or hardware-accelerated rendering | | React Native | lottie-react-native | Wrapper around iOS/Android libs | | Flutter | lottie-flutter | Uses CanvasKit or Skia | | Windows / UWP | Lottie-Windows | Uses Composition API | | Web (low file size) | lottie-light | Smaller footprint, fewer features | These JSON files can then be rendered natively

In simpler terms: Bodymovin bridges the gap between motion design and development. It allows a designer to create complex, vector-based animations in After Effects and hand them off to a developer who can implement them with a single line of code—without losing quality, scalability, or interactivity. It allows a designer to create complex, vector-based