15 ms·

Lottie is an open format for animated vector graphics

350 points by marcodiego 1y ago

herrherrmann 1y ago
I do like the idea of having a common and open format for animations. That being said, I see quite a few web devs reaching for Lottie (which will add quite a few hundred kilobytes for the library/wrapper, and some extra ones for each animation), instead of learning more about CSS- and SVG-based animations (which would be a multitude smaller and more easily adjustable). In that sense, I also don’t like how they continuously boast about Lottie’s small size on the main website, while only comparing it to gif and png files (and not mentioning SVG/CSS animations). I’m sure it is a good fit for usage on native mobile apps, though.
- throwanem 1y ago
  Where it really excels IME is as a target format for design authoring tools, most notably After Effects, which is discussed above the fold in the linked article as the original motivation for the library and the file format. No one is writing stuff like that by hand to begin with. I've worked with Lottie animations as a mobile app dev, but never authored one.
  - pavlov 1y ago
    It’s not trivial to produce a Lottie file in After Effects. 95% of the app’s features are off limits, so it’s practically impossible to take an existing AE project and convert it. Instead you have to ask an artist to author a project from scratch within Lottie’s limitations, but of course there’s no feedback within AE itself if you’re overstepping the boundaries, so they have to be particularly careful. I wouldn’t recommend it based on my personal experience. But I guess there are teams who have the diligence to make it work.
- legulere 1y ago
  Shouldn't it be possible to compile Lottie-animations down to SVG+JS? Is that maybe just something that's still missing?
  - JusticeJuice 1y ago
    That’s exactly what the library does for its web renderer. There’s a svg renderer and a web renderer.
    - herrherrmann 1y ago
      The library does this in during runtime, though, if I’m not mistaken? The original commenter is probably referring to a build step that extracts the Lottie content and only leaves JS and SVG in the final output (which is not the case, as the Lottie web player library itself needs to be included as well, to render the animations and provide interactivity APIs during the rendering of the web page).
- echelon 1y ago
  > instead of learning more about CSS- and SVG-based animations Contrarian opinion: Flash was one of the best things about Web 1.0. The forced move to CSS and the constellation of other "standards" still hasn't caught up to what Flash once offered us. Flash was all at once a video format, animation format, programming environment, video player, interactive UI system, game programming engine, multiplayer MMO game dev engine, infographics system -- actually, it was literally everything you wanted it to be. And it was so simple that even kids could use it. If Adobe had opened everything - the format, the player, etc. - it could have become something tremendous that is still with us. I think there's space for this to be rethought and redone. We shouldn't be so dogmatic that CSS and SVG and HTML and Javascript are the only way. They've had nearly 40 years to shine and we're still struggling with the same issues. We should be trying to reinvent the wheel.
  - bsimpson 1y ago
    Unfortunately doing that many things means the codebase must have been rather big. Big enough that auditing and removing licensed code (for instance, the video codecs) seems to be more than they had the stomach for. It really was a wonderful tool that is still unmatched for creative coding.
  - Benanov 1y ago
    Flash was one of those things that tried to do too much, and some of its things started being at cross-purposes with each other. The video conflicted with its roots as a vector/animation studio, and that's why Apple famously didn't use it - it ended up being a battery hog. A lot of interests in web-based video wanted DRM, which meant it was never going to be usable by Free Software. It was trying to do too much and then the usual corporate mismanagement led to its demise.
    - rchaud 1y ago
      Apple famously didn't use it because it didn't sit inside their walled garden and they couldn't put any ads in it, take a cut of every sale, nor charge developers annually for the privilege of building on their property. That's 3 revenue sources that users and developers were skipping out on. Android phones had Flash support and it worked well enough. Was it desktop-level, of course not. But Android native apps themselves were a mess from a power consumption standpoint until they implemented a JIT compiler in v2.3 "Gingerbread" as well as a task manager that freed up RAM by closing inactive applications. I remember specifically choosing an ASUS android tablet over an iPad because I wanted to use the full web, open multiple tabs at a time and play Flash games, rather than deal with iOS' "one app open at a time" philosophy.
- afavour 1y ago
  Not to mention CSS animations (and the newer Web Animations API) allow hardware acceleration while libraries like this do not.
  - panstromek 1y ago
    Lottie has canvas and svg renderer (that uses CSS transitions where possible, I believe), so technically it's also hardware accelerated (in most cases at least).
- nine_k 1y ago
  The point of Lottie is not simple animations like CSS transitions, but complex arbitrary animations, more like a cartoon than a minor piece of motion. A good example is the Telegram messenger that uses Lottie as the format of animated stickers, e.g. https://tlgrm.eu/stickers/Princess https://tlgrm.eu/stickers/Princess (click to animate).
  - herrherrmann 1y ago
    Yes, and I think Lottie is very fitting for that use case! I was referring to reaching for Lottie even for simple small animations, because it seems easier to just drop the designer’s Lottie file into the project, rather than building the animation in a more native way. At least I’ve witnessed recommendations like this on Reddit.
    - throwanem 1y ago
      Oh, I think I see your meaning. Sure, for trivial translation and rotation, even scaling, I wouldn't expect or want to take a new dependency on the library. But if I already have Lottie in the bundle and a completed example of the animation in Lottie format, how much sense in the general case does it make to reimplement instead of using what I have? It will take pixel peeping and I would most likely do better to spend the same time on something a designer can't also do.
  - hbn 1y ago
    Amazing how many of those are using it to animate unrealistic, exaggerated boob physics
- interludead 1y ago
  Yep, for web, unless you really need After Effects-level complexity, native web animation tools are still way more elegant and efficient
- codedokode 1y ago
  SVG/CSS needs a browser (SVG doesn't allow embedding fonts, can contains CSS/JS) and it is a flaw. SVG is designed only for embedding into websites. How do I display it in a native application.
zdragnar 1y ago
Having had minimal experience with both Lottie and Rive on the implementation / embedding side, I can say that my experience with Rive was strictly better. Does anyone know if there's something I was missing about Lottie if I needed to choose between them in the future?
- cjbgkagh 1y ago
  I had never head of Rive before and it looks like something I can use in one of my projects. Thanks, this is the kind of stuff that keeps me addicted to HN.
  - euvin 1y ago
    I've used Rive in a small personal project before and I really can't imagine creating or editing web animations in any other way. Apparently they also made their own vector-based feathering technique, which is also amazing: https://rive.app/blog/introducing-vector-feathering https://rive.app/blog/introducing-vector-feathering I do understand the appeal for an open format though. Rive seems to have their own proprietary (documented) binary format: https://rive.app/docs/runtimes/advanced-topic/format https://rive.app/docs/runtimes/advanced-topic/format
    - cjbgkagh 1y ago
      They say on https://rive.app/pricing https://rive.app/pricing that the Format is OS and MIT, perhaps I have missed something?
      - euvin 1y ago
        Oh, my mistake. I shouldn't have used the word "proprietary", but too late to edit. There does seem to be community-made runtimes: https://rive.app/docs/runtimes/community-runtimes https://rive.app/docs/runtimes/community-runtimes
  - DidYaWipe 1y ago
    Me neither. Was pretty enthused, and even more so when I found that they have a desktop app instead of being yet another Web-only tool. Then I downloaded the app and found you can't use it without setting up an "account" and being online. So in the end, this is more tiresome Web-only crap. Deleted.
victorbjorklund 1y ago
I dont like that you cant really SSR (the starting frame) the animations. At least as far as I know.
- mpeg 1y ago
  You can simply load in the first frame of the animation as a static image on SSR, then replace with the animation This can also be used for progressive enhancement, since if the user has requested reduced motion you can simply leave the first (or last) frame of the animation, or hide it altogether.
  - victorbjorklund 1y ago
    In an easy way just using the lottie-file? That is cool! Have to check it out.
WorldPeas 1y ago
Saw a demo for this a while ago on here and lost it, been thinking about it ever since. Now that visual models are getting a lot better at vectors and reasoning in general I wonder if we could reach a point where it is at least possible to translate part of an cartoon into a scalable vector for preservation or remastering
panstromek 1y ago
Lottie for me is sadness. I love the idea, it's really cool that you can generate the animations from what animators already use, but boy, the implementation of it is very disappointing. The format is probably one of the worst choices they could do for a use case like this - it's JSON, for something that is usually a bunch of numbers and perfect fit for more compact binary format. This JSON can reference external files, so the animation is either - a folder with bunch of files (sub pictures)\ - or those files are inlined in the JSON as base64 - or it's just a single file, which turns out to be a zipped folder of this amalgamation. If you imagine loading this on the web, you have to load absolutely enormous SDK (which is not very actively maintained and isn't very well size optimized), and then loading the animation either means loading a bunch of files separately, or loading a single file but processing it through multiple different parsers in multiple passes (JSON, base64, png, lottie, zip). If you use the .lottie file, you have to include zip decompresser in the JS bundle (.lottie player, which is a different library, also uses 2MB wasm blob, not sure why). It took me a while to squash the footprint of this craziness in our app and I'm glad we don't use it in a hot path, because this is just crazy - it's supposed to be this little cherry on top for special occasions, but it's by far the heaviest part of the codebase. I had to manually tweak tose animations, run them through some optimizers, fixup weird path and inlining issues, fixed issue with those exporters turning vectors to png, all sorts of stuff. On top of that, the browser doesn't survive playing more than a few of them reliably at the same time (especially on lower end devices), because turns out (who would have guessed?) - animating stuff with JS and DOM is not quite performant. I kinda want to try a weekend project to turn these into optimized svg sprites and try to play them with a CSS transision, see if this makes it more bearable.
- chrisldgk 1y ago
  100% what you said. One thing I ran into as well was that horrid after effects -> Lottie workflow. Many layers and styles also just don’t work when you export them, so you have to explain to motion designers which features they’re allowed to use and which they aren’t, which a lot of time they’re not thrilled about. In many cases just rendering a video and binding playback to interaction is much more lightweight and less work-intensive than using Lottie. I’ve heard about Rive before and a lot of the choices they make seem to be exact fixes for the issue of Lottie. I haven’t worked with it yet however, so YMMV.
65 1y ago
In practice most UIs don't have crazy image based animations and can be done with CSS. Lotties might be good for the one off animated GIF style animations, but in that case why not just use the many tools to create SVG animations? Many designers I've worked with get really excited about Lottie animations but I usually just make the animations in CSS since it's more performant and easier to work with. By the way, CSS animations have gotten significantly easier with the @property rule. Simply edit the CSS variable and your animation will update!
- mpeg 1y ago
  The real killer feature of lottie is that there is an after effects plugin that exports as a lottie JSON. It doesn't always work 1:1 especially with things like AE filters on certain layers but when it works it saves a ton of time
  - mmooss 1y ago
    It won't export as SVG?
personality1 1y ago
I prefer rive.app, it is a lot lighter and easier to work with imo, plus, it has a great editor
- terpimost 1y ago
  Why would rive website use video instead of their binary format and performant js?
  - neurowave 1y ago
    Mostly to show projects on-device/being interacted with. We also designed this version of the site back before we had responsive layouts, dynamic text, data binding, etc. We will eventually update it to be designed entirely in Rive, but we're first prioritizing launching features like Libraries, Scripting, and a better way to handle Accessibility features.
gervwyk 1y ago
We wanted to create some animations for our site https://resonancy.io https://resonancy.io, and I’ve built them using lottielab. I must say, they have done an amazing job to create a decent editor which really works with svgs, by far better than any online tool I’ve used before. Smooth experience overall. Then comes export. Not sure if this is only a problem with lottielab or the lottie format, but if not using their proprietary minimizing hosting the animations are so big that I consider them useless for a landing page. Their compression reduces the size by 400% on average for larger animations. We ended up paying $30 subscription just to host the animations which does not sit right with me. So will be looking for alternatives but not looking forward to recreating them.. In the past I’ve used other react based animation libs and they chore of building animations was so tedious I would not attempt anything complicated. With lottlielab you can really play and build what you can imagine with relative ease. Have not tried Rive.. Will check it out. Any suggestions on how to better compress lottie format for libs for that would be appreciated.
poyhen 1y ago
in their recent summer release airbnb created a new video format called lava. considering they also created lottie its really interesting they had a need for something new. i hope they will open source it in the future
- TheSisb2 1y ago
  Note: they didn’t create lottie, they sorta acquihired the developer who made it and brought the project under their umbrella
sergiotapia 1y ago
I hate working with Lottie, it's json just a terrible format. What are alternatives in the react native world?
- vyrotek 1y ago
  https://rive.app/docs/runtimes/react-native/react-native https://rive.app/docs/runtimes/react-native/react-native
b3ing 1y ago
The problem with Rive (competitor to Lottie) is that it’s built less artistically. You can’t just draw things with a pencil/blob tool. You have to do things a certain way which mostly means importing SVGs. Definitely doesn’t have the Flash simple artistic point of view for a UI, don’t get me wrong it does some interesting things but it’s less intuitive than Flash
- higgins 1y ago
  raster images are also supported asset types for input
ComputerGuru 1y ago
This is the AirBnb format, right? They ditched it for a newer alternative; I’m not sure if this was relying on them for maintenance and development or not, but if so I’d say start looking elsewhere.
- mortenjorck 1y ago
  Wait, Airbnb itself stopped using (and presumably maintaining) Lottie? What are they using now? I’m trying to find any kind of news or blog post about this and I’m coming up empty-handed. Edit: it looks like you were referring to Lava, which is a video format, not a vector animation format. Airbnb is using Lava micro-videos now in some places where they previously used Lottie animations, but Lava appears to be more a modern approach to animated GIFs rather than Lottie’s modern approach to Flash. https://medium.com/@waldobear002/airbnbs-new-lava-icon-format-a-technical-deep-dive-b2604626c7e0 https://medium.com/@waldobear002/airbnbs-new-lava-icon-forma...
  - ComputerGuru 1y ago
    Yup. They don’t compete technically, but they are realistically competing for attention and support as they’re using one in place of the other.
nokeya 1y ago
There is an independent C++ library by Samsung called rlottie: https://github.com/Samsung/rlottie https://github.com/Samsung/rlottie Telegram uses it for animated stickers, Samsung itself uses it for icons on their smart watches
- landr0id 1y ago
  Do not under any circumstances use rlottie for your application if it consumes untrusted animations. It is not secure software and Samsung does not service security issues. *I will add though if you absolutely need to, use Telegram's fork. They've at least fixed most of the known issues (with very great commit messages like "fix bug")
  - kudanai 1y ago
    There is also the ThorVG project, which has better support for Lottie and is a more robust graphics library and was created by the same people. https://thorvg.github.io/ https://thorvg.github.io/
lucaswilliam10 1y ago
[dead]
shmerl 1y ago
How does it compare to SVG?
Tade0 1y ago
Our corporate UI library uses lottie-web for its animated components like spinners, progress bars etc. This page: https://airbnb.io/lottie/#/community-showcase https://airbnb.io/lottie/#/community-showcase Absolutely cooks my company-issued laptop and my belief is that had it been done via CSS, it wouldn't have this effect.
- bitpush 1y ago
  Those are all gifs of animations on that page.
  - Tade0 1y ago
    That is a huge indictment towards my company laptop. Or perhaps it was a different page. I will have to establish that on Monday.
  - Tade0 1y ago
    For the record: you were right. It was the same page and I mistakenly took those images for lottie images. That being said it bothers me that they felt that a 500kB gif is more appropriate here. Perhaps I should just compile my images to gifs then?
Dwedit 1y ago
Isn't Flash an open format?
itsthecourier 1y ago
been using it for years, our apps look awesome because of it
nye2k 1y ago
We’ve been using Lottie for years now for certain PBS KIDS brand animations and it has multiple benefits over other formats. As with any runtime rendering in a 2D plane, it takes performance hits at scale. Lottie implements into all our pipelines and workflows nicely; game, app, video. We run them as idle bg animations on the home layer across many platforms - and then deliver static experience for devices that don’t support them, like Roku. After Effects is a beast, and with this workflow a single person can animate a loop that we can then export the Lottie/Bodymovin json, Mov for Broadcast & YouTube, and simplify into an SVG for low end users. Not to mention it has all been a great stop gap after Flash. Now we use Rive too, and can import those json animations into new workflows. I have personally worked with several core folks in this animation space including Hernan, Mat Groves of Pixi, Matt Karl of CloudKid, all whom tackled these late Flash transitions, with plugins, new export formats and math. I have learned that all of these efforts have their place, and they all have their own FORMATS which are often incompatible with each other because of the way major softwares organize animation over a timeline. Choose your battles, pick the right tool for the project.
- interludead 1y ago
  Love the pragmatic take. It's easy to get caught up in tool vs. tool debates, but the reality is that every format/workflow has its sweet spot.
zhyder 1y ago
What's the SOTA for generating animated vector graphics these days? The text-oriented LLMs don't seem to be able to draw aesthetic SVG paths, and the image diffusion models do bitmaps rather than vectors. I think there's a big market for a GenAI Illustrator with After Effects so hope someone cracks it.
userbinator 1y ago
What's wrong with SWF? The spec is available and very efficient. Those worried about security paranoically can not implement all the advanced Turing-complete parts. The sibling comment about it being another JSON format is spot-on; being drowned in webcrap means a whole generation of developers which have no idea what efficiency means.
aramattamara 1y ago
Lottie hogs CPU in browser like crazy.
lwansbrough 1y ago
The concept of Lottie is very cool, but what you'll find after using it is that it is very hard to work with. Rive is a new platform that is trying to solve a lot of the issues with Lottie. In particular, dynamic data updates in Lottie are all but impossible. We did however manage to make Lottie do it, for Tracker.GG's Valorant Backtrack (like Spotify Wrapped) -- here's a demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0 https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3... To make this work, we're accessing the layers by name as they were named in a source file, created in After Effects. Each slide is its own Lottie file, so care had to be put into creating seamless transitions between the files. IIRC, Lottie doesn't provide any dynamic layer access out of the box, so we had to use a second library to work with the Lottie instance, and then build a better data control layer on top of that library. This was a pretty intense project that took lots and lots of iteration between our design team and engineering, as the process does not lend itself to collaboration very well. In some cases, layers properties are targeted by other attributes, such as by their actual default value (ie. colour.) Not at all a fun format to work with. I'm looking forward to being able to use Rive for future work.
- interludead 1y ago
  Rive definitely looks promising... Curious to see if it lives up to the hype once it matures more.
saffsffefewafew 1y ago
[dead]
ch3ckmat3 1y ago
It's a shame for not having any impressive animations on the front page.
d3admorozz 1y ago
Lottie for Lottie Moss?
pawanjswal 1y ago
Love how Lottie makes animations super sleek and lightweight.
interludead 1y ago
From my point of view, on paper, Lottie seems like the perfect bridge between designers and devs, but once you start poking under the hood, the trade-offs pile up fast
sandra_vu 1y ago
The LottieFiles team is doing some amazing workflows for the Lottie format. They also work on streamlining the size too.
fsadoifaoie8 1y ago
[dead]
biohacker85 1y ago
The only use case Lottie solved for me was for displaying a video with a transparent background.
rogierhofboer 1y ago
Lot's of flash comparisons in this thread... I'll share some tools I've not seen mentioned before: Google Web Designer is what Google created to 'replace' flash for ads, but it can also be used for other purposes. It has a WYSIWYG editor, timeline, events and scripting.bl But no Lottie support https://webdesigner.withgoogle.com/ https://webdesigner.withgoogle.com/ Expressive Animator (paid, but not expensive and with free trial), made for SVG animations, can also export Lottie. https://expressive.app/expressive-animator/ https://expressive.app/expressive-animator/ And there is the open source Glaxnimate, which does support Lottie. https://glaxnimate.org/ https://glaxnimate.org/
- ress 1y ago
  [dead]
codedokode 1y ago
Lottie is also used by native applications like Telegram. Despite flaws like using JSON I guess there is no alternative.
hermet 1y ago
See this project as well. https://github.com/thorvg/thorvg https://github.com/thorvg/thorvg We can make use of a very useful library. ThorVG supports the widest range of the Lottie specification and is an extremely portable and lightweight engine.

350 points by marcodiego 1y ago

I do like the idea of having a common and open format for animations. That being said, I see quite a few web devs reaching for Lottie (which will add quite a few hundred kilobytes for the library/wrapper, and some extra ones for each animation), instead of learning more about CSS- and SVG-based animations (which would be a multitude smaller and more easily adjustable). In that sense, I also don’t like how they continuously boast about Lottie’s small size on the main website, while only comparing it to gif and png files (and not mentioning SVG/CSS animations). I’m sure it is a good fit for usage on native mobile apps, though.

throwanem 1y ago
Where it really excels IME is as a target format for design authoring tools, most notably After Effects, which is discussed above the fold in the linked article as the original motivation for the library and the file format. No one is writing stuff like that by hand to begin with. I've worked with Lottie animations as a mobile app dev, but never authored one.
- pavlov 1y ago
  It’s not trivial to produce a Lottie file in After Effects. 95% of the app’s features are off limits, so it’s practically impossible to take an existing AE project and convert it. Instead you have to ask an artist to author a project from scratch within Lottie’s limitations, but of course there’s no feedback within AE itself if you’re overstepping the boundaries, so they have to be particularly careful. I wouldn’t recommend it based on my personal experience. But I guess there are teams who have the diligence to make it work.
legulere 1y ago
Shouldn't it be possible to compile Lottie-animations down to SVG+JS? Is that maybe just something that's still missing?
- JusticeJuice 1y ago
  That’s exactly what the library does for its web renderer. There’s a svg renderer and a web renderer.
  - herrherrmann 1y ago
    The library does this in during runtime, though, if I’m not mistaken? The original commenter is probably referring to a build step that extracts the Lottie content and only leaves JS and SVG in the final output (which is not the case, as the Lottie web player library itself needs to be included as well, to render the animations and provide interactivity APIs during the rendering of the web page).
echelon 1y ago
> instead of learning more about CSS- and SVG-based animations Contrarian opinion: Flash was one of the best things about Web 1.0. The forced move to CSS and the constellation of other "standards" still hasn't caught up to what Flash once offered us. Flash was all at once a video format, animation format, programming environment, video player, interactive UI system, game programming engine, multiplayer MMO game dev engine, infographics system -- actually, it was literally everything you wanted it to be. And it was so simple that even kids could use it. If Adobe had opened everything - the format, the player, etc. - it could have become something tremendous that is still with us. I think there's space for this to be rethought and redone. We shouldn't be so dogmatic that CSS and SVG and HTML and Javascript are the only way. They've had nearly 40 years to shine and we're still struggling with the same issues. We should be trying to reinvent the wheel.
- bsimpson 1y ago
  Unfortunately doing that many things means the codebase must have been rather big. Big enough that auditing and removing licensed code (for instance, the video codecs) seems to be more than they had the stomach for. It really was a wonderful tool that is still unmatched for creative coding.
- Benanov 1y ago
  Flash was one of those things that tried to do too much, and some of its things started being at cross-purposes with each other. The video conflicted with its roots as a vector/animation studio, and that's why Apple famously didn't use it - it ended up being a battery hog. A lot of interests in web-based video wanted DRM, which meant it was never going to be usable by Free Software. It was trying to do too much and then the usual corporate mismanagement led to its demise.
  - rchaud 1y ago
    Apple famously didn't use it because it didn't sit inside their walled garden and they couldn't put any ads in it, take a cut of every sale, nor charge developers annually for the privilege of building on their property. That's 3 revenue sources that users and developers were skipping out on. Android phones had Flash support and it worked well enough. Was it desktop-level, of course not. But Android native apps themselves were a mess from a power consumption standpoint until they implemented a JIT compiler in v2.3 "Gingerbread" as well as a task manager that freed up RAM by closing inactive applications. I remember specifically choosing an ASUS android tablet over an iPad because I wanted to use the full web, open multiple tabs at a time and play Flash games, rather than deal with iOS' "one app open at a time" philosophy.
afavour 1y ago
Not to mention CSS animations (and the newer Web Animations API) allow hardware acceleration while libraries like this do not.
- panstromek 1y ago
  Lottie has canvas and svg renderer (that uses CSS transitions where possible, I believe), so technically it's also hardware accelerated (in most cases at least).
nine_k 1y ago
The point of Lottie is not simple animations like CSS transitions, but complex arbitrary animations, more like a cartoon than a minor piece of motion. A good example is the Telegram messenger that uses Lottie as the format of animated stickers, e.g. https://tlgrm.eu/stickers/Princess https://tlgrm.eu/stickers/Princess (click to animate).
- herrherrmann 1y ago
  Yes, and I think Lottie is very fitting for that use case! I was referring to reaching for Lottie even for simple small animations, because it seems easier to just drop the designer’s Lottie file into the project, rather than building the animation in a more native way. At least I’ve witnessed recommendations like this on Reddit.
  - throwanem 1y ago
    Oh, I think I see your meaning. Sure, for trivial translation and rotation, even scaling, I wouldn't expect or want to take a new dependency on the library. But if I already have Lottie in the bundle and a completed example of the animation in Lottie format, how much sense in the general case does it make to reimplement instead of using what I have? It will take pixel peeping and I would most likely do better to spend the same time on something a designer can't also do.
- hbn 1y ago
  Amazing how many of those are using it to animate unrealistic, exaggerated boob physics
interludead 1y ago
Yep, for web, unless you really need After Effects-level complexity, native web animation tools are still way more elegant and efficient
codedokode 1y ago
SVG/CSS needs a browser (SVG doesn't allow embedding fonts, can contains CSS/JS) and it is a flaw. SVG is designed only for embedding into websites. How do I display it in a native application.

zdragnar 1y ago

Having had minimal experience with both Lottie and Rive on the implementation / embedding side, I can say that my experience with Rive was strictly better. Does anyone know if there's something I was missing about Lottie if I needed to choose between them in the future?

cjbgkagh 1y ago
I had never head of Rive before and it looks like something I can use in one of my projects. Thanks, this is the kind of stuff that keeps me addicted to HN.
- euvin 1y ago
  I've used Rive in a small personal project before and I really can't imagine creating or editing web animations in any other way. Apparently they also made their own vector-based feathering technique, which is also amazing: https://rive.app/blog/introducing-vector-feathering https://rive.app/blog/introducing-vector-feathering I do understand the appeal for an open format though. Rive seems to have their own proprietary (documented) binary format: https://rive.app/docs/runtimes/advanced-topic/format https://rive.app/docs/runtimes/advanced-topic/format
  - cjbgkagh 1y ago
    They say on https://rive.app/pricing https://rive.app/pricing that the Format is OS and MIT, perhaps I have missed something?
    - euvin 1y ago
      Oh, my mistake. I shouldn't have used the word "proprietary", but too late to edit. There does seem to be community-made runtimes: https://rive.app/docs/runtimes/community-runtimes https://rive.app/docs/runtimes/community-runtimes
- DidYaWipe 1y ago
  Me neither. Was pretty enthused, and even more so when I found that they have a desktop app instead of being yet another Web-only tool. Then I downloaded the app and found you can't use it without setting up an "account" and being online. So in the end, this is more tiresome Web-only crap. Deleted.

victorbjorklund 1y ago

I dont like that you cant really SSR (the starting frame) the animations. At least as far as I know.

mpeg 1y ago
You can simply load in the first frame of the animation as a static image on SSR, then replace with the animation This can also be used for progressive enhancement, since if the user has requested reduced motion you can simply leave the first (or last) frame of the animation, or hide it altogether.
- victorbjorklund 1y ago
  In an easy way just using the lottie-file? That is cool! Have to check it out.

WorldPeas 1y ago

Saw a demo for this a while ago on here and lost it, been thinking about it ever since. Now that visual models are getting a lot better at vectors and reasoning in general I wonder if we could reach a point where it is at least possible to translate part of an cartoon into a scalable vector for preservation or remastering

panstromek 1y ago

Lottie for me is sadness. I love the idea, it's really cool that you can generate the animations from what animators already use, but boy, the implementation of it is very disappointing. The format is probably one of the worst choices they could do for a use case like this - it's JSON, for something that is usually a bunch of numbers and perfect fit for more compact binary format. This JSON can reference external files, so the animation is either - a folder with bunch of files (sub pictures)\ - or those files are inlined in the JSON as base64 - or it's just a single file, which turns out to be a zipped folder of this amalgamation. If you imagine loading this on the web, you have to load absolutely enormous SDK (which is not very actively maintained and isn't very well size optimized), and then loading the animation either means loading a bunch of files separately, or loading a single file but processing it through multiple different parsers in multiple passes (JSON, base64, png, lottie, zip). If you use the .lottie file, you have to include zip decompresser in the JS bundle (.lottie player, which is a different library, also uses 2MB wasm blob, not sure why). It took me a while to squash the footprint of this craziness in our app and I'm glad we don't use it in a hot path, because this is just crazy - it's supposed to be this little cherry on top for special occasions, but it's by far the heaviest part of the codebase. I had to manually tweak tose animations, run them through some optimizers, fixup weird path and inlining issues, fixed issue with those exporters turning vectors to png, all sorts of stuff. On top of that, the browser doesn't survive playing more than a few of them reliably at the same time (especially on lower end devices), because turns out (who would have guessed?) - animating stuff with JS and DOM is not quite performant. I kinda want to try a weekend project to turn these into optimized svg sprites and try to play them with a CSS transision, see if this makes it more bearable.

chrisldgk 1y ago
100% what you said. One thing I ran into as well was that horrid after effects -> Lottie workflow. Many layers and styles also just don’t work when you export them, so you have to explain to motion designers which features they’re allowed to use and which they aren’t, which a lot of time they’re not thrilled about. In many cases just rendering a video and binding playback to interaction is much more lightweight and less work-intensive than using Lottie. I’ve heard about Rive before and a lot of the choices they make seem to be exact fixes for the issue of Lottie. I haven’t worked with it yet however, so YMMV.

65 1y ago

In practice most UIs don't have crazy image based animations and can be done with CSS. Lotties might be good for the one off animated GIF style animations, but in that case why not just use the many tools to create SVG animations? Many designers I've worked with get really excited about Lottie animations but I usually just make the animations in CSS since it's more performant and easier to work with. By the way, CSS animations have gotten significantly easier with the @property rule. Simply edit the CSS variable and your animation will update!

mpeg 1y ago
The real killer feature of lottie is that there is an after effects plugin that exports as a lottie JSON. It doesn't always work 1:1 especially with things like AE filters on certain layers but when it works it saves a ton of time
- mmooss 1y ago
  It won't export as SVG?

personality1 1y ago

I prefer rive.app, it is a lot lighter and easier to work with imo, plus, it has a great editor

terpimost 1y ago
Why would rive website use video instead of their binary format and performant js?
- neurowave 1y ago
  Mostly to show projects on-device/being interacted with. We also designed this version of the site back before we had responsive layouts, dynamic text, data binding, etc. We will eventually update it to be designed entirely in Rive, but we're first prioritizing launching features like Libraries, Scripting, and a better way to handle Accessibility features.

gervwyk 1y ago

We wanted to create some animations for our site https://resonancy.io https://resonancy.io, and I’ve built them using lottielab. I must say, they have done an amazing job to create a decent editor which really works with svgs, by far better than any online tool I’ve used before. Smooth experience overall. Then comes export. Not sure if this is only a problem with lottielab or the lottie format, but if not using their proprietary minimizing hosting the animations are so big that I consider them useless for a landing page. Their compression reduces the size by 400% on average for larger animations. We ended up paying $30 subscription just to host the animations which does not sit right with me. So will be looking for alternatives but not looking forward to recreating them.. In the past I’ve used other react based animation libs and they chore of building animations was so tedious I would not attempt anything complicated. With lottlielab you can really play and build what you can imagine with relative ease. Have not tried Rive.. Will check it out. Any suggestions on how to better compress lottie format for libs for that would be appreciated.

poyhen 1y ago

in their recent summer release airbnb created a new video format called lava. considering they also created lottie its really interesting they had a need for something new. i hope they will open source it in the future

TheSisb2 1y ago
Note: they didn’t create lottie, they sorta acquihired the developer who made it and brought the project under their umbrella

sergiotapia 1y ago

I hate working with Lottie, it's json just a terrible format. What are alternatives in the react native world?

vyrotek 1y ago
https://rive.app/docs/runtimes/react-native/react-native https://rive.app/docs/runtimes/react-native/react-native

b3ing 1y ago

The problem with Rive (competitor to Lottie) is that it’s built less artistically. You can’t just draw things with a pencil/blob tool. You have to do things a certain way which mostly means importing SVGs. Definitely doesn’t have the Flash simple artistic point of view for a UI, don’t get me wrong it does some interesting things but it’s less intuitive than Flash

higgins 1y ago
raster images are also supported asset types for input

ComputerGuru 1y ago

This is the AirBnb format, right? They ditched it for a newer alternative; I’m not sure if this was relying on them for maintenance and development or not, but if so I’d say start looking elsewhere.

mortenjorck 1y ago
Wait, Airbnb itself stopped using (and presumably maintaining) Lottie? What are they using now? I’m trying to find any kind of news or blog post about this and I’m coming up empty-handed. Edit: it looks like you were referring to Lava, which is a video format, not a vector animation format. Airbnb is using Lava micro-videos now in some places where they previously used Lottie animations, but Lava appears to be more a modern approach to animated GIFs rather than Lottie’s modern approach to Flash. https://medium.com/@waldobear002/airbnbs-new-lava-icon-format-a-technical-deep-dive-b2604626c7e0 https://medium.com/@waldobear002/airbnbs-new-lava-icon-forma...
- ComputerGuru 1y ago
  Yup. They don’t compete technically, but they are realistically competing for attention and support as they’re using one in place of the other.

nokeya 1y ago

There is an independent C++ library by Samsung called rlottie: https://github.com/Samsung/rlottie https://github.com/Samsung/rlottie Telegram uses it for animated stickers, Samsung itself uses it for icons on their smart watches

landr0id 1y ago
Do not under any circumstances use rlottie for your application if it consumes untrusted animations. It is not secure software and Samsung does not service security issues. *I will add though if you absolutely need to, use Telegram's fork. They've at least fixed most of the known issues (with very great commit messages like "fix bug")
- kudanai 1y ago
  There is also the ThorVG project, which has better support for Lottie and is a more robust graphics library and was created by the same people. https://thorvg.github.io/ https://thorvg.github.io/

lucaswilliam10 1y ago

[dead]

shmerl 1y ago

How does it compare to SVG?

Tade0 1y ago

Our corporate UI library uses lottie-web for its animated components like spinners, progress bars etc. This page: https://airbnb.io/lottie/#/community-showcase https://airbnb.io/lottie/#/community-showcase Absolutely cooks my company-issued laptop and my belief is that had it been done via CSS, it wouldn't have this effect.

bitpush 1y ago
Those are all gifs of animations on that page.
- Tade0 1y ago
  That is a huge indictment towards my company laptop. Or perhaps it was a different page. I will have to establish that on Monday.
- Tade0 1y ago
  For the record: you were right. It was the same page and I mistakenly took those images for lottie images. That being said it bothers me that they felt that a 500kB gif is more appropriate here. Perhaps I should just compile my images to gifs then?

Dwedit 1y ago

Isn't Flash an open format?

itsthecourier 1y ago

been using it for years, our apps look awesome because of it

nye2k 1y ago

We’ve been using Lottie for years now for certain PBS KIDS brand animations and it has multiple benefits over other formats. As with any runtime rendering in a 2D plane, it takes performance hits at scale. Lottie implements into all our pipelines and workflows nicely; game, app, video. We run them as idle bg animations on the home layer across many platforms - and then deliver static experience for devices that don’t support them, like Roku. After Effects is a beast, and with this workflow a single person can animate a loop that we can then export the Lottie/Bodymovin json, Mov for Broadcast & YouTube, and simplify into an SVG for low end users. Not to mention it has all been a great stop gap after Flash. Now we use Rive too, and can import those json animations into new workflows. I have personally worked with several core folks in this animation space including Hernan, Mat Groves of Pixi, Matt Karl of CloudKid, all whom tackled these late Flash transitions, with plugins, new export formats and math. I have learned that all of these efforts have their place, and they all have their own FORMATS which are often incompatible with each other because of the way major softwares organize animation over a timeline. Choose your battles, pick the right tool for the project.

interludead 1y ago
Love the pragmatic take. It's easy to get caught up in tool vs. tool debates, but the reality is that every format/workflow has its sweet spot.

zhyder 1y ago

What's the SOTA for generating animated vector graphics these days? The text-oriented LLMs don't seem to be able to draw aesthetic SVG paths, and the image diffusion models do bitmaps rather than vectors. I think there's a big market for a GenAI Illustrator with After Effects so hope someone cracks it.

userbinator 1y ago

What's wrong with SWF? The spec is available and very efficient. Those worried about security paranoically can not implement all the advanced Turing-complete parts. The sibling comment about it being another JSON format is spot-on; being drowned in webcrap means a whole generation of developers which have no idea what efficiency means.

aramattamara 1y ago

Lottie hogs CPU in browser like crazy.

lwansbrough 1y ago

The concept of Lottie is very cool, but what you'll find after using it is that it is very hard to work with. Rive is a new platform that is trying to solve a lot of the issues with Lottie. In particular, dynamic data updates in Lottie are all but impossible. We did however manage to make Lottie do it, for Tracker.GG's Valorant Backtrack (like Spotify Wrapped) -- here's a demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0 https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3... To make this work, we're accessing the layers by name as they were named in a source file, created in After Effects. Each slide is its own Lottie file, so care had to be put into creating seamless transitions between the files. IIRC, Lottie doesn't provide any dynamic layer access out of the box, so we had to use a second library to work with the Lottie instance, and then build a better data control layer on top of that library. This was a pretty intense project that took lots and lots of iteration between our design team and engineering, as the process does not lend itself to collaboration very well. In some cases, layers properties are targeted by other attributes, such as by their actual default value (ie. colour.) Not at all a fun format to work with. I'm looking forward to being able to use Rive for future work.

interludead 1y ago
Rive definitely looks promising... Curious to see if it lives up to the hype once it matures more.

saffsffefewafew 1y ago

[dead]

ch3ckmat3 1y ago

It's a shame for not having any impressive animations on the front page.

d3admorozz 1y ago

Lottie for Lottie Moss?

pawanjswal 1y ago

Love how Lottie makes animations super sleek and lightweight.

interludead 1y ago

From my point of view, on paper, Lottie seems like the perfect bridge between designers and devs, but once you start poking under the hood, the trade-offs pile up fast

sandra_vu 1y ago

The LottieFiles team is doing some amazing workflows for the Lottie format. They also work on streamlining the size too.

fsadoifaoie8 1y ago

[dead]

biohacker85 1y ago

The only use case Lottie solved for me was for displaying a video with a transparent background.

rogierhofboer 1y ago

Lot's of flash comparisons in this thread... I'll share some tools I've not seen mentioned before: Google Web Designer is what Google created to 'replace' flash for ads, but it can also be used for other purposes. It has a WYSIWYG editor, timeline, events and scripting.bl But no Lottie support https://webdesigner.withgoogle.com/ https://webdesigner.withgoogle.com/ Expressive Animator (paid, but not expensive and with free trial), made for SVG animations, can also export Lottie. https://expressive.app/expressive-animator/ https://expressive.app/expressive-animator/ And there is the open source Glaxnimate, which does support Lottie. https://glaxnimate.org/ https://glaxnimate.org/

ress 1y ago
[dead]

codedokode 1y ago

Lottie is also used by native applications like Telegram. Despite flaws like using JSON I guess there is no alternative.

hermet 1y ago

See this project as well. https://github.com/thorvg/thorvg https://github.com/thorvg/thorvg We can make use of a very useful library. ThorVG supports the widest range of the Lottie specification and is an extremely portable and lightweight engine.