A lot of times, mostly when I’ve been reading a lot of detective novels, like the Bosch series, I like to think of myself as a technology detective. When I see really cool shit on the Internet, like the latest website for Apple’s goggles, I NEED to know how it was made. In Apple’s case, they make 3D mockups of their products in a vector-based 3D software called Spline. This is how they make product mockups that look completely real that explode apart and reveal all of their tech-innards when you scroll down the page.

In the case of Lottie, it starts with something even more humble than vector files, or rather, it also starts with vector files and JavaScript to program animation, coloring, shading, opacity (or alpha), and more. So the shapes, and how they look and move are all being called out in a file that can be read universally by web browsers and desktop or mobile apps. The result is you get a small, efficient animation type that will look exactly the same on every device you use it on.

So first I opened the Lottie file in a text editor and was faced with something like the lines and lines of code you see to the right. The thing is, code is lightweight, download size-wise, and if you can even display all of your image elements in code (like you do with SVGs) you can keep your overall file size really really small.