Diving into Lottie-Web to Understand How Animation Players Work (part 1)

You have probably already tried Lottie or at least heard of it. It's easy to use: you can export the animation from Adobe After Effects to JSON, connect lottie-web, feed it the resulting JSON file and the animation will appear on your screen. But how does this magic work?

In this workshop, we will start with the basics of animation playback: layers, transformations, keyframes, animation curves. We'll dive into the lottie.json structure. And see what exactly lottie-web does and what patterns the developers of this library use. To wrat it up, we'll see a non-obvious application of Lottie.

There will be many pictures!