Digging into Animation Players Using lottie-web as an Example (Part 2)
summary
Examines how Lottie animations are played by walking through animation playback fundamentals—layers, transforms, keyframes and easing curves—and analyzing the structure of lottie.json. Explains what lottie-web does internally and the implementation patterns the library uses. Concludes with examples of unconventional uses of Lottie informed by those internals.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 2:56PixiJS setup
- 9:14Player structure
- 17:22Fixing first bugs
- 25:19Animated properties
- 35:14Keyframe interpolation
- 44:10Positioning tweaks
- 47:11Lottie Web architecture
- 50:54Testing use cases
- 53:30Custom transitions
- 56:51Q&A
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
17mBetter User Experience With Animations