After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading animations. Triggers on tasks involving Lottie, lottie-web, lottie-react, dotLottie, After Effects

Lottie Animations Overview Lottie is a library for rendering After Effects animations in real time on web, iOS, Android, and React Native. Created by Airbnb, it allows designers to ship animations as easily as shipping static assets. Animations are exported from After Effects as JSON files using the Bodymovin plugin, then rendered natively with minimal performance overhead. When to use Lottie: Designer created animations that need pixel perfect fidelity Complex animated icons and micro interactions Loading animations and progress indicators Onboarding sequences and tutorial animations Marketing animations and promotional content Alternative to GIF/video with smaller file sizes and scalability Key advantages: Vector based (scalable without quality loss) Significantly smaller file sizes than GIF or video Editable at runtime (colors, speed, segments) Full designer control via After Effects Cross platform rendering consistency Interactive controls (play, pause, seek, loop) Core Concepts Lottie Format Types 1. JSON Lottie (.json) Original Lottie format Exported from After Effects via Bodymovin plugin Human readable JSON structure Larger file sizes (not compressed) Widely supported across all platforms 2. dotLottie (.lottie) Modern compressed format ZIP archive containing JSON + assets Supports multiple animations and themes in one file Smaller file sizes (up to 90% reduction) Recommended for production use Library Options lottie web (original library): @lottiefiles/dotlottie web (modern, recommended): @lottiefiles/dotlottie react (React integration): lottie react (alternative React wrapper): Animation Data Sources 1. LottieFiles (lottie.host) 100,000+ free animations Direct URL embedding CDN hosting 2. Local JSON/dotLottie files Bundled with application Better performance (no network request) Version control friendly 3. After Effects export Custom designer animations Bodymovin plugin required Export settings critical for file size Common Patterns 1. Basic HTML Integration with dotLottie web 2. React Component with Controls 3. Event Listeners and Lifecycle Hooks 4. Scroll Driven Animation with lottie react 5. Hover Triggered Segment Playback 6. Multi Animation and Theme Support 7. Web Worker for Performance (DotLottieWorker) Integration Patterns With GSAP ScrollTrigger With Framer Motion Vue 3 Integration Svelte Integration Performance Optimization File Size Optimization 1. Export Settings in After Effects: Enable "Skip images that aren't used" Use "Glyphs" instead of fonts when possible Simplify paths (reduce points in illustrator) Avoid effects that create large data (particles, noise) Use shape layers instead of vector layers 2. Compression: Use dotLottie format (.lottie) for automatic compression Run JSON through Lottie optimizer tools Remove unnecessary metadata 3. Lazy Loading: Runtime Performance 1. Renderer Selection: 2. Web Workers: 3. Mobile Optimization: Common Pitfalls 1. Memory Leaks from Improper Cleanup Problem: Not destroying Lottie instances when components unmount. Solution: 2. Event Listener Cleanup Problem: Event listeners not removed, causing multiple handlers. Solution: 3. Large File Sizes Problem: Exported JSON files are 500KB+ for simple animations. Solutions: Simplify After Effects composition (reduce layers, keyframes) Use dotLottie format for compression Check Bodymovin export settings (disable "Include expressions" if not needed) Remove unused assets before export Use Lottie optimizer tools: https://lottiefiles.com/tools/lottie editor 4. Animation Performance Issues Problem: Animation stutters or drops frames. Solutions: Switch from SVG to Canvas renderer Use DotLottieWorker for web worker rendering Reduce complexity in After Effects (fewer layers, simpler shapes) Lower devicePixelRatio on mobile Avoid animating too many properties simultaneously 5. Incorrect Path/URL References Problem: Animation doesn't load due to CORS or incorrect paths. Solution: 6. After Effects Export Compatibility Problem: Some After Effects features don't export to Lottie. Unsupported features: Layer effects (drop shadows, glows) use shape layers instead Blending modes (limited support) 3D layers Expressions (partial support) Track mattes (partial support) Solution: Test export early and often Use LottieFiles preview before exporting Check Bodymovin compatibility: https://airbnb.io/lottie/ /supported features Convert effects to shapes when possible Resources This skill includes: scripts/ generate lottie component.py Generate React/Vue/Svelte Lottie component boilerplate optimize lottie.py Optimize Lottie JSON file size references/ api reference.md Complete API documentation for lottie web, lottie react, and dotlottie web after effects export.md Guide for exporting animations from After Effects performance guide.md Detailed performance optimization strategies assets/ starter lottie/ Complete React + Vite starter template with Lottie examples examples/ Real world Lottie animation patterns and use cases Related Skills gsap scrolltrigger For scroll driven Lottie animations synchronized with page scroll motion framer Combine with Framer Motion for layout animations wrapping Lottie animated component libraries Pre built components that may include Lottie animations threejs webgl For 3D animations beyond Lottie's 2D capabilities react three fiber Alternative for complex 3D animated scenes

lottie-animations