When I was younger, I got into motion design as an hobbyist. I’ve learned how to use programs like After Effects, Cinema 4D, and Premiere by watching videos on YouTube and consuming diverse ressources online. So naturally, one of the first things I did when starting to develop websites was creating Lottie animations with After Effects, exploring the technology’s capabilities and limitations and adding it into my personal projects. Since then, I've incorporated Lottie animations into various projects and I’ve made some just for fun, some of them are on my **website.**
More recently, Rive seems to came out ****as a viable alternative to build beautiful, vectoral animations but with a different approach that embrace the most recent and powerful capabilities of our browsers. So, how is it in the real world? Is it truly comparable? Should we consider replacing Lottie with Rive?
In this article, I will compare Rive and Lottie in a messy way (but fast to read) and then, I will explore Rive in another article (link at the end).
Remember Iron Man’s HUD? Damn cool.
Remember Iron Man’s HUD? Damn cool.
.riv files will necessitate the Rive application, which is either in-browser or a desktop app.pro account but you can go pretty far with a free account.https://www.instagram.com/reel/C6JrmkOu7NV/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==
https://www.instagram.com/p/C2NrT4ISL-P/
dotLottie)..json files rendering animated .svg..gif format (weight, framerate, non vectoral…)https://www.instagram.com/p/C6n8axmSd_y/
Lottie has been a game-changer in the realm of web animations, addressing the limitations of .gif files and providing a more efficient solution. Until recently, Lottie was the primary choice for in-browser animations. However, Rive has emerged as a strong competitor, offering enhanced interactivity and solving additional problems faced by the animation and gaming industries.
Lottie, created by Airbnb, revolutionized how animations are handled in web and mobile environments. Its lightweight, vector-based animations offered a significant improvement over .gif files, which were often bulky and inefficient.
Rive has taken things a step further by focusing on interactivity and integration with gaming environments. Its use of WebAssembly and support for 2D interfaces in 3D environments showcase its potential to redefine interactive animations.
A famous comparison from a Rive’s website article:
Optimized dotLottie files are about 80% smaller than a classic .json animation file. You can find this animation on this page. Yep, you recognized Valorant’s “match found” animation (re-created by myself just for fun).
State-Driven Animations: Rive is specifically designed to handle state-driven animations, responding to user interactions like hover, focus, and click events. It can also manage looping animations, A → B animations, or non-user-related states, such as a multi-step waiting screen (e.g., tracking your Uber Eats delivery).