TE
TechEcho
AccueilTop 24hRécentsMeilleursQuestionsPrésentationsEmplois
GitHubTwitter
Accueil

TechEcho

Une plateforme d'actualités technologiques construite avec Next.js, fournissant des nouvelles et discussions technologiques mondiales.

GitHubTwitter

Accueil

AccueilRécentsMeilleursQuestionsPrésentationsEmplois

Ressources

HackerNews APIHackerNews OriginalNext.js

© 2025 TechEcho. Tous droits réservés.

Lottie is an open format for animated vector graphics

349 pointspar marcodiegoil y a 5 jours

31 comments

panstromekil y a 5 jours
Lottie for me is sadness.<p>I love the idea, it&#x27;s really cool that you can generate the animations from what animators already use, but boy, the implementation of it is very disappointing.<p>The format is probably one of the worst choices they could do for a use case like this - it&#x27;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<p>- a folder with bunch of files (sub pictures)\<p>- or those files are inlined in the JSON as base64<p>- or it&#x27;s just a single file, which turns out to be a zipped folder of this amalgamation.<p>If you imagine loading this on the web, you have to load absolutely enormous SDK (which is not very actively maintained and isn&#x27;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).<p>It took me a while to squash the footprint of this craziness in our app and I&#x27;m glad we don&#x27;t use it in a hot path, because this is just crazy - it&#x27;s supposed to be this little cherry on top for special occasions, but it&#x27;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.<p>On top of that, the browser doesn&#x27;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.<p>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.
评论 #44088911 未加载
评论 #44090044 未加载
评论 #44095565 未加载
评论 #44091579 未加载
评论 #44089374 未加载
评论 #44089657 未加载
评论 #44091208 未加载
评论 #44105394 未加载
评论 #44095551 未加载
评论 #44092289 未加载
评论 #44091534 未加载
评论 #44091415 未加载
评论 #44090576 未加载
评论 #44089915 未加载
评论 #44090022 未加载
评论 #44090427 未加载
评论 #44090325 未加载
herrherrmannil y a 5 jours
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&#x2F;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&#x2F;CSS animations).<p>I’m sure it is a good fit for usage on native mobile apps, though.
评论 #44088667 未加载
评论 #44088718 未加载
评论 #44088610 未加载
评论 #44088650 未加载
评论 #44101920 未加载
评论 #44094975 未加载
评论 #44088705 未加载
zdragnaril y a 5 jours
Having had minimal experience with both Lottie and Rive on the implementation &#x2F; embedding side, I can say that my experience with Rive was strictly better.<p>Does anyone know if there&#x27;s something I was missing about Lottie if I needed to choose between them in the future?
评论 #44089029 未加载
评论 #44088671 未加载
lwansbroughil y a 4 jours
The concept of Lottie is very cool, but what you&#x27;ll find after using it is that it is very hard to work with.<p>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.<p>We did however manage to make Lottie do it, for Tracker.GG&#x27;s Valorant Backtrack (like Spotify Wrapped) -- here&#x27;s a demo: <a href="https:&#x2F;&#x2F;tracker.gg&#x2F;valorant&#x2F;backtrack&#x2F;episode6&#x2F;00d0aa2d-94d3-49ff-823c-8123f2b62848&#x2F;eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==&#x2F;0" rel="nofollow">https:&#x2F;&#x2F;tracker.gg&#x2F;valorant&#x2F;backtrack&#x2F;episode6&#x2F;00d0aa2d-94d3...</a><p>To make this work, we&#x27;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&#x27;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.<p>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&#x27;m looking forward to being able to use Rive for future work.
评论 #44095008 未加载
Tade0il y a 5 jours
Our corporate UI library uses lottie-web for its animated components like spinners, progress bars etc.<p>This page:<p><a href="https:&#x2F;&#x2F;airbnb.io&#x2F;lottie&#x2F;#&#x2F;community-showcase" rel="nofollow">https:&#x2F;&#x2F;airbnb.io&#x2F;lottie&#x2F;#&#x2F;community-showcase</a><p>Absolutely cooks my company-issued laptop and my belief is that had it been done via CSS, it wouldn&#x27;t have this effect.
评论 #44090629 未加载
gervwykil y a 5 jours
We wanted to create some animations for our site <a href="https:&#x2F;&#x2F;resonancy.io" rel="nofollow">https:&#x2F;&#x2F;resonancy.io</a>, 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.<p>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..<p>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.<p>Have not tried Rive.. Will check it out. Any suggestions on how to better compress lottie format for libs for that would be appreciated.
65il y a 5 jours
In practice most UIs don&#x27;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?<p>Many designers I&#x27;ve worked with get really excited about Lottie animations but I usually just make the animations in CSS since it&#x27;s more performant and easier to work with.<p>By the way, CSS animations have gotten significantly easier with the @property rule. Simply edit the CSS variable and your animation will update!
评论 #44088996 未加载
nye2kil y a 5 jours
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.<p>After Effects is a beast, and with this workflow a single person can animate a loop that we can then export the Lottie&#x2F;Bodymovin json, Mov for Broadcast &amp; YouTube, and simplify into an SVG for low end users.<p>Not to mention it has all been a great stop gap after Flash.<p>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.<p>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.<p>Choose your battles, pick the right tool for the project.
评论 #44095024 未加载
b3ingil y a 5 jours
The problem with Rive (competitor to Lottie) is that it’s built less artistically. You can’t just draw things with a pencil&#x2F;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
评论 #44090249 未加载
ComputerGuruil y a 5 jours
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.
评论 #44093112 未加载
rogierhofboeril y a 4 jours
Lot&#x27;s of flash comparisons in this thread... I&#x27;ll share some tools I&#x27;ve not seen mentioned before:<p>Google Web Designer is what Google created to &#x27;replace&#x27; 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 <a href="https:&#x2F;&#x2F;webdesigner.withgoogle.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;webdesigner.withgoogle.com&#x2F;</a><p>Expressive Animator (paid, but not expensive and with free trial), made for SVG animations, can also export Lottie. <a href="https:&#x2F;&#x2F;expressive.app&#x2F;expressive-animator&#x2F;" rel="nofollow">https:&#x2F;&#x2F;expressive.app&#x2F;expressive-animator&#x2F;</a><p>And there is the open source Glaxnimate, which does support Lottie. <a href="https:&#x2F;&#x2F;glaxnimate.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;glaxnimate.org&#x2F;</a>
评论 #44104377 未加载
userbinatoril y a 5 jours
What&#x27;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.
nokeyail y a 5 jours
There is an independent C++ library by Samsung called rlottie: <a href="https:&#x2F;&#x2F;github.com&#x2F;Samsung&#x2F;rlottie">https:&#x2F;&#x2F;github.com&#x2F;Samsung&#x2F;rlottie</a><p>Telegram uses it for animated stickers, Samsung itself uses it for icons on their smart watches
评论 #44090133 未加载
hermetil y a 3 jours
See this project as well. <a href="https:&#x2F;&#x2F;github.com&#x2F;thorvg&#x2F;thorvg">https:&#x2F;&#x2F;github.com&#x2F;thorvg&#x2F;thorvg</a><p>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.
zhyderil y a 5 jours
What&#x27;s the SOTA for generating animated vector graphics these days? The text-oriented LLMs don&#x27;t seem to be able to draw aesthetic SVG paths, and the image diffusion models do bitmaps rather than vectors. I think there&#x27;s a big market for a GenAI Illustrator with After Effects so hope someone cracks it.
WorldPeasil y a 5 jours
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
personality1il y a 5 jours
I prefer rive.app, it is a lot lighter and easier to work with imo, plus, it has a great editor
评论 #44089126 未加载
poyhenil y a 5 jours
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
评论 #44093957 未加载
interludeadil y a 4 jours
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
codedokodeil y a 4 jours
Lottie is also used by native applications like Telegram. Despite flaws like using JSON I guess there is no alternative.
itsthecourieril y a 5 jours
been using it for years, our apps look awesome because of it
sandra_vuil y a 4 jours
The LottieFiles team is doing some amazing workflows for the Lottie format. They also work on streamlining the size too.
biohacker85il y a 4 jours
The only use case Lottie solved for me was for displaying a video with a transparent background.
sergiotapiail y a 5 jours
I hate working with Lottie, it&#x27;s json just a terrible format. What are alternatives in the react native world?
评论 #44090409 未加载
victorbjorklundil y a 5 jours
I dont like that you cant really SSR (the starting frame) the animations. At least as far as I know.
评论 #44088981 未加载
ch3ckmat3il y a 4 jours
It&#x27;s a shame for not having any impressive animations on the front page.
shmerlil y a 5 jours
How does it compare to SVG?
pawanjswalil y a 4 jours
Love how Lottie makes animations super sleek and lightweight.
aramattamarail y a 5 jours
Lottie hogs CPU in browser like crazy.
d3admorozzil y a 4 jours
Lottie for Lottie Moss?
Dweditil y a 5 jours
Isn&#x27;t Flash an open format?