Lottie Files & Other Web Motion Graphics Libraries & Tools for 2021

It’s easy to fall into a rabbit hole of deprecated ideas and tools. In 2021 the number of tools and libraries for a developer to solve any given problem can seem daunting. Not a long time ago people were constantly building real-time chat apps from scratch. Now we have socket.io, a library that boasts that its “Hello World” is a real-time chat app. We used to animate things on the web with Macromedia Shockwave, then Adobe Flash Player, now HTML5 is so good that the web has completely dropped support for Adobe Flash. An animated image on a webpage was once a GIF or some sort of video. In a similar sentiment of things getting better, faster, and smaller; we now have Lottie files.

Lottie files were created by Airbnb to be the future of web animations, and they are just as great as the sales pitch makes them sound.

Just look at this example from the homepage from https://lottiefiles.com/

Crisp, clear, small, smooth, fast; I could go on. However, It’s important at this point to talk about the limitations of LottieFiles. Described best by this snippet from https://www.thevisualpro.com/ the difference between vector graphics and raster graphics is this.

Raster graphics, which are composed of colored pixels arranged to display an image, vector graphics are made up of paths, each with a mathematical formula (vector) that tells the path how it is shaped.

Both the PNG and GIF files are “raster graphics”, every pixel in the image has data, and those pixels are all rendered simultaneously. Vector graphics are a description of paths, shapes, strokes, and fills. That’s why Lottie files take on the gorgeous and data-friendly format of a big’ol JSON object, describing these shapes and how they transform. This means you need to be a vector graphics artist with After Effects, the only tool you can do it with. A pretty serious limitation, however a great tool for existing mograph artists and you don't need to make lottie files to use them all over your code.

Now say you don't have After-Effects (which is required to generate vector animations as well as one of the only supported exporters for Lottie files), you aren't an illustrator, and you want to make actual page elements on the web move. You could do this with JQuery, as they recently had us do in the coding Bootcamp I'm in. You could do this with CSS animations using the keyframes parameter. Let’s define some basic motion graphics terms to help make it feel a little less Jargon-ey.

• Keyframes

A key frame (or keyframe) in animation and filmmaking is a drawing or shot that defines the starting and ending points of any smooth transition. https://en.wikipedia.org/wiki/Key_frame

• Easing

In classic animation, the term for motion that starts slowly and accelerates is “slow in,” and for motion that starts quickly and decelerates is “slow out.” The terminology most commonly used on the web for these are “ease in” and “ease out,” respectively. Sometimes the two are combined, which is called “ease in out.” Easing, then, is really the process of making the animation less severe or pronounced. https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing

Animations can get very complex, but they are all comprised of keyframes and easing curves. Say you want to make an HTML element that just appeared onto the page with absolutely no *action* bounce, or fall, or jump. This is made possible with exciting tools that make keyframe and easing creation possible and great. How your elements appear and disappear on your page, and how they react to your interactions are more important than ever. I started my research on this topic going pretty deep into TweenJS, a javascript library released in 2017 for interpolating inbe-tween any value with a number selectable with your code over a period of time using a particular easing curve.

Then I found AnimeJS, realized I was wasting my time and that there were newer, cooler tools out there for doing the same darn thing, and I promptly deleted TweenJS from my little test project to start playing with bigger guns. This is a two part post, I’ll follow up with my findings on AnimeJS later this week.