Understanding how animation players work using lottie-web (part 1)
summary
Explains how Lottie animations are implemented by examining lottie-web: covers animation playback basics (layers, transforms, keyframes, easing curves), the structure of lottie.json, and the internal responsibilities and design patterns used in the lottie-web library. Also shows less obvious ways to apply Lottie.
AI-written summary · about
chapters (8)
- 0:00Welcome to Lottie workshop
- 2:09What Lottie is and why use it
- 9:22HTML/CSS/video alternatives
- 15:07Building Lottie-web player
- 28:51Why study Lottie internals
- 33:11Contributing to Lottie
- 37:52Lottie theory basics
- 38:13Custom Lottie renderer
related talks
28mAnimating the Web: Elevating UX with Lottie and modern technologies
15mLottie: Establishing an Open Standard for Vector Animation
14mLottie to Rive, the Evolution of Rendering Animations in React
22mLottie: Animating the bridge between designers and developers
19mHow to make interactive animations with Figma
44mKill Lottie? Bring in Rive?
37mrlottie: A New Approach to Motion Graphics UI
28mDemystifying complex animations creation process in React Native