Of course, you can also use jQuery or vanilla JS to trigger the animations on a particular event if you prefer. It’s refined, efficient, well-maintained since its 2013 release.Īpplying the Animate library to your project is as simple as linking the CSS and adding the required CSS classes to your HTML elements.
Lottie uses separate ‘animation players’ optimized for Web, iOS, and Android respectively. Haiku (Recently open sourced – Free but future uncertain – buyer beware).Adobe Animator (Limited feature support).
This makes Lottie animations fast, efficient, easily scripted, and often quite beautiful.Īlthough Lottie was conceived as an extension to Adobe After Effects, there are plenty of (arguably better) ‘Lottie-native’ alternatives for creating Lottie animations. In fact, the Lottie format was specifically designed to make the Adobe After Effects animations work efficiently on the web and mobile. You’ll need a third-party animation tool that can export a ‘Lottie-ready’ JSON file. Nevertheless, we don’t think UI/UX designers can afford to ignore it.Ĭreating a Lottie animation is more akin to creating a video production. Let’s be clear: Lottiejs is a very different type of animation library to the other eight in this list.