Adobe After Effects should not be a web design standard; after all, the application was originally developed for the film industry, particularly with regard to editing and post-production. It did not take long for video game developers to warm up to this application, and this got the attention of web developers as well. Since its original release nearly three decades ago, After Effects has been gradually turning into an indispensable tool for Web Designers who wish to create and render Animations in the browser without excessive coding; however, this software presents a learning curve that may seem too steep for some designers to handle.
In 2017, software engineers at internet giant Airbnb launched Lottie, an open-source project intended to make it easier for web developers to add animations to their projects. Lottie can be described as a giant React.JS library that enables the rendering of After Effects animations without actually having to learn or use AE. This tool makes it simpler for web designers to use rich, real-time animations and transitions in web projects without having to code in another programming language. The open-source nature of Lottie has opened the doors to other projects such as LottieLab, which allows the exporting and editing of animations without having to worry about using AE at all. The new LottieLab export function takes place in real-time, so you can incorporate animations to a live Android native or progressive web app.
The Lottie library features a set of well-organized components, and these components can be customized through variables that in turn enable designers to adjust colors and sizes. Lottie is available for both Mac and Windows, and currently supports 16.8 million assets.
You can use Lottie by applying some simple JavaScript code, but you can also customize the project by editing any of the variables that the library provides. This enables you to add CSS-based attributes such as font-size and font-weight for the animations, whereas the default Lottie library does not provide customization. However, you will still need to understand and code a little bit of JavaScript. You will also need to understand and edit the HTML and CSS code that Lottie generates. For more information click here https://v.redd.it/2jqtvjftlxj71.
