RIVE vs Lottie? Which one do you prefer?
So, I have been playing with RIVE for a while and was considering making a bunch of loading animations, etc. to then either sell or distribute as a "PWYW" model.
Since a lot of people working on projects here might usually use these type of files, I thought it would be a good idea to get some opinions here.
So, what do you guys think?
Trending on Indie Hackers
This is cool. Never knew about these before!
same, now that I know about them I can see tonnes of possibilities
I spoke about Lottie tools at a recent conference, recording freely available https://www.youtube.com/watch?v=jPVDOcqQAag.
There's a companion article I'm polishing, you can read (please comment) draft https://medium.com/@andydentperth/whole-lottie-tools-out-there-fac7f8ac9297
I know a lot more than I'd like to about graphical formats for 2D and 3D.
I've worked in 3D CAD previously, done umpteen layout tools, 3D scientific visualisation and my current startup, Touchgram, is a way to create small interactive experiences as messages. That has a very tight internal binary format.
Awesome! thanks for sharing, will definitely look into it.
oh, I use lottie.. .
like here.
wickedlaunchers.com
never heard of rive, any link?
Here it is. https://rive.app/ :) I ran into it by accident a while back, I think on version one they were able to export json files, but right now they are working on the version 2 which is in beta so it doesn't have all those features yet.
Also, wow! That's such a cool 3d design right there. Did you design it?
Thank you Kev!
I haveto try it...
no itts not my creation, is a very popular one bit it suited my needs.
I use Lottie when needed, no exact reason why, it just works ¯\(ツ)/¯
I gotta look more into the application of both, I think they both pretty much the same in terms of adding to a project and figuring out if there would be compatibility issues, etc.
(What I am not sure is if there are some languages, etc. that might not accept it)
Supposedly, RIVE can have even smaller file sizes (At least that's what they said in their Explainer) Which I guess that could a good benefit since everyone is always trying to get things more optimized.
That's pretty easy to achieve. Lottie is JSON and most of their content is paths, which are pairs of points. It's a bit more compact than SVG's use of XML format but still quite inefficient, eg:
one point being the literal text
{"x":[0.833],"y":[0.833]},26 characters (bytes).In Touchgram's binary format, where I'm applying the same techniques I expect Rive would use, that would be 4 bytes., so about 18% of the size.
When you have a sequence of points, you can store just the deltas between them so get as small as one byte 4% of the size of Lottie.
Things average out a bit but it would be reasonable to expect a binary version of most animations to be no more than 8% of the size of the Lottie document.
Note, that's not a compressed file but a binary one which will decode extremely fast. In contrast, large XML or JSON text documents with complex animations start bogging down just reading the numbers. (This is at a scale of 3D model beyond what you'd expect to worry about in Lottie-sized animations though.)
That makes sense. Do you know about setting up the runtime?
I was able to paste one the public files in my website, but if I wasn't able to figure out how to store/upload my file locally and then embed it from there.
I haven't deployed either Lottie or Rive on a website myself. In my talk, I showed the HTML scaffolding that some of the tools generate for Lottie. Those are all on the repo for the talk https://github.com/AndyDentFree/DDDlottie21
Looking at the Rive page, it seems they need a lot of JS to use the animations, did you try walking through this?
https://www.learnrive.com/running-animations/first-web-animation