Rive vs Lottie (and Other) Animations
As a motion designer, one of the distinctions is understanding animation, and how it interacts with the medium people are on. The latter is important, because the medium often dictates what technology stack can be used, which in turn dictates what types of animation (and interaction) can be done.
Lottie
Lottie is a framework that exports After Effects animations into SVG animations, all inside a .json file. And because it’s on virtually all platforms (Mac, iOS, Android, some form of Windows), it’s incredibly powerful. The ease-of-use, small file size, and its flexibility are reasons why I helped my company to start adopting it, whether it’s to help highlight the product or for icon animations—
However, there are some limitations to using Lottie—
- Types of animations are limited. Cannot use the full power of After Effects, as there are only a subset that it supports (mainly due to the limitations of SVG animations)¹.
- Not easy to build in interactions. You must have some dev skills (or some dev friends) in order to create interactions… not easy to come by.
- Cannot easily embed to third-party blogs. As such, we’ve resorted to using gif’s on our blog posts, which makes the animations more pixellated and huge in file size (often in megs). 😱
Rive
Enter Rive. They’ve been around for a few years now, but they’ve updated their suite of tools that now makes them a formidable contender to Lottie². As I’ve been actively playing with this in the past week, I’ve listed out 4 main benefits:
- 1️⃣ As a vector output, they’re always crisp and small in file size. (No different from Lottie in this regard.)
- 2️⃣ Can be easily embedded to our blogging platform (Ghost)³, with no dev help necessary!
- 3️⃣ Enables designers to carve out interactions, as it’s directly baked into their platform.
- 4️⃣ Interactions themselves can be embedded onto social media, like Twitter!
So, I’ve created on interactive animation so far, and while there have been some hiccups… do color me impressed. I think there’s a huge potential in this area, and I’m looking forward to playing around with it some more!
[1] To Lottie’s credit, they have a full page of supported features.
[2] I’m not gonna list out their features, so check out their homepage. No, seriously, you should check it out.
[3] Ironically, there’s no way of embedding this inside Medium — like on this post…
