Lottie and the Language of Motion Design
summary
A native renderer that exports After Effects as JSON (via the Bodymovin plugin) and renders natively on Android, iOS and React Native, built at Airbnb and open-sourced six months ago. It implements fills, gradients, strokes, trim paths, masks/mattes, text-as-glyphs or fonts, path interpolators and matrix transforms, caches quantized gradient frames, and uses path measure for trim segments. Community LottieFiles hosts ~400 animations with ~100,000 downloads; typical full‑screen animations are ~50–100KB and run in production (Airbnb, Walgreens, Target, NYT, Google I/O).
AI-written summary · about
chapters (17)
- 0:00Introduction to Lottie
- 2:33What is Lottie and its origins
- 9:15How Lottie works under the hood
- 11:20Shapes and bezier curves in animation
- 14:05Fills, strokes and gradients explained
- 18:23Masks, mats and advanced effects
- 22:34Canvas rendering and transfer modes
- 27:09Text rendering in Lottie
- 28:10Transforms and movement
- 32:01Parenting and complex animations
- 32:22Interpolators and timing curves
- 33:27Color interpolation and gamma correction
- 35:52Keyframes and animation structure
- 36:35Testing and compatibility
- 37:40Working with designers and tools
- 39:27Limitations and future of Lottie
- 40:51Q&A and closing remarks
related talks
22mLottie: Animating the bridge between designers and developers
29mPractical Lottie
30mBringing Designers and Engineers Closer: Practical Lottie Techniques
15mLottie: Establishing an Open Standard for Vector Animation
28mAnimating the Web: Elevating UX with Lottie and modern technologies
47mLearn Some New Moves: Advanced Android Animation
43mMeaningful motion design and how to implement it
37mThree Approaches to Animations on Android