Hacker News new | past | comments | ask | show | jobs | submit login
Lottie – Use after effects animations in web and native apps (airbnb.io)
283 points by udbhavs 5 months ago | hide | past | favorite | 111 comments

Lottie files can be converted, with some limitations, to native SVG SMIL animations via bodymovin-to-smil [1]. With SMIL animations you save 66.6k worth of gzipped javascript [2] and your animations run before any javascript kicks in (great for above the fold animations). SMIL seems to have gotten little attention as Chrome intended to deprecate it 6 years ago [3]. That seems no longer be the case [3] and now that IE 11 is dead, SMIL is supported by virtually all modern browsers [4]. We used SMIL animations on our home page [5] and it works really well. It would be great (for our designer) if bodymovin-to-smil supported more lottie features though.

[1] https://www.npmjs.com/package/bodymovin-to-smil [2] https://bundlephobia.com/package/lottie-web@5.8.1 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=482689 [4] https://caniuse.com/svg-smil [5] https://bookem.com

I love SMIL. Have been using it to craft custom SVG loaders for almost every brand I've worked with. Loader is usually much smaller than a gif, vector, animated 60 FPS, etc. So good.

Do you have any resources on how you learned to create such loaders? I hacked together a custom loading animation for some tools I've built just using images & css transforms, but would love to learn to make things even slicker.

Not quite, I've learned it by looking at MDN and some other samples. Maybe I'll write up a tutorial for others.

I'll have to try out the bodymovin-SMIL plugin. I've long looked for a tool to generate SMIL animations, but I always end up just writing them by hand [1], which gives me much greater control... I've even wondered from time to time about building an SVG animation studio myself, as admittedly, designing and animating in code is not for everyone.

[1] https://www.pcmaffey.com

I saw your site yesterday and forgot to comment on it then - I wanted to say thanks for the great articles and interesting animations.

Posted this because I wanted to start a discussion on the ecosystem and workflows around Lottie and animations on the web. Here are some alternative programs I found that can export Lottie files:



Cavalry can export Lottie files: https://cavalry.scenegroup.co/

Seems it's only possible with their pro version.

We have a plugin for Adobe Animate (formerly Adobe Flash Professional) that exports to Lottie, similar to the plugin for After Effects. It's pretty rough at the moment though with many Animate features not supported.


PS: I work for LottieFiles and built the plugin.

Skottie: Lottie player using the Skia graphics library[0][1]

Skia powers Google Chrome[2], Flutter, & Fuchia[3].

[0]: https://skia.org/docs/user/modules/skottie/ [1]: https://skottie.skia.org/ [2]: https://skia.org/ [3]: https://skia.org/docs/dev/flutter/

Here‘s another one:


I remember googling for tools that can export to Lottie that are not AE and not coming up with much. Thank you for this list!

I think the initial reason for Lottie was to actually get AE animations to web. AE is very popular among designers to create some avant-garde UI ideas. The problem was 99% of them were absolutely impossible to implement with existing tech. Lottie was one of the steps to make at least some simple stuff real.

By avant-garde stuff I mean for example this guy’s work, he’s a killer: https://dribbble.com/glebich

Same here, only reason I didn't pursue Lottie was because of AE.

How's the non AE ecosystem for Lottie?

Recent versions of Synfig can apparently export to Lottie too, with some limitations, but that was mostly designed for anime-imspired character animation rather than UI stuff and I'm not sure all the features intended for animating characters works correctly.

Just started looking at Lottie recently, the stuff is awesome

Wow! I thought this just wasn't possible without AE or Haiku. Thanks a lot for linking Glaxnimate.

Haiku Animator is sadly an Electron app, with no relation to Haiku Vector Icon Format.

The Start button in Windows 11 uses Lottie, along with the various other new animated icons. WinUI has an AnimatedIcon control that makes them easy to integrate:


Disclosure: I work at Microsoft.

I hate to say it but man, I miss Flash!! The websites, interactions and animations we were able to create in it 20 years ago..! There is still nothing that comes close to productivity and quality of output. I am disappointed that Adobe butchered Flash and wasn’t able to come up with modern and mobile friendly version. The war with Apple should have pushed them forward. Instead they gave up.

Flash did not integrate well with the rest of the page and was an utter nightmare with respect to accessibility and responsive design. It was also buggy, prone to memory leaks and crashing, and required the end-user to install or update arbitrary code on their machine, with all the headache and security implications that necessitates. Support and performance was also horrible on mobile when it was available at all. Flash was pretty and had decent tooling, but it sucked pretty hard compared to today's options.

Those are exactly the problems that Adobe was supposed to solve. And it’s not like it was mission impossible. I’d say everything we have today still sucks compared to Flash. Building a website with the level of interactivity, micro interactions and animations using today’s technology is super complicated and almost impossible for a single person.

> [Web integration, accessibility, and responsive design] are exactly the problems that Adobe was supposed to solve. And it’s not like it was mission impossible.

"Solve" is weird in this context, but Adobe did make good progress in each of these areas, first by supporting some of them in Flash Player, and ultimately by abandoning the proprietary runtime.

> Building a website with the level of interactivity, micro interactions and animations using today’s technology is super complicated and almost impossible for a single person.

Flash was never for this (other than in a "if all you've got is a hammer, everything looks like a nail" sense), but if that's your benchmark then you can still do that with Adobe Animate.

Some people only had the skill to wield a GUI builder/animation timeline-type hammer, and deploying to the web was the only nail that mattered. For them to have access and distribution to that audience was killer, and we’re all worse off for the lack.

Yes everyone is aware of the problems with flash. The point was that nothing today compares with how nice the development tools and experience were for it.

> The point was that nothing today compares with how nice the development tools and experience were for it.

You'll be happy to learn that Adobe Animate is the Flash Professional (née Macromedia Flash, née FutureSplash Animator) development tool/experience: https://www.adobe.com/products/animate.html

We released a Lottie exporter plugin for Adobe Animate (currently available as an alpha release) so that all the skill and experience people had gained with Flash/Animate can be used to create Lottie animations!


Disclosure: I work at LottieFiles.

Again, mindset beat technology.

ActionScript and Flex were more powerful than JavaScript and HTML, still the latter won because it was open.

Not just open. The standard underlying model in Flash is a stage with fixed dimensions. Great for arcade games and animations, but bad for responsive or being readable in various screen sizes. HTML can be a pain when you want to create sophisticated UI layouts, but by default it’s readable on all screens and reflows content automatically.

Flash/Silverlight could have worked for SPAs and we could have keep js/css simple for pure document pages.

I did Adobe Air desktop applications and there was no issue with scaling the application to different sizes, the Flex4 framework is still one of my favorites for layouting Applications GUIs for sure 10x better then web GUI frameworks, sometimes I wonder if the creators of angular ever in their life created a desktop or mobile application because for me the architecture seems stupid or created for a weird target audience.

I never understood the appeal of Angular.

The first time I heard about it was on a JavaScript meetup, where a guy praised it as the best that ever happened to JS.

He said multiple times "Yes, and we had some issues... but they came from the fact that we didn't do it like Angular intended, when we rewrote as the maintainers explained, it worked!"

I never touched it.

Went from ExtJS4, to Ember.js, to React and then I stayed there.

For me as a developer angular feels like (I can be wrong since I am not some genius that works at Google) a tool for making hello World forms , like you want to give it to soem people that do not know JavaScript and have them write code using ng-if and ng-repeats, then on top of that you add a ton of magic that is implemented in a shit way so you most of the time you get n errors when soemthing is broken and if you are lucky you get some hints.

I used react a few years ago, this tool made sense, you create Components and you implement render functions(I even used it without JSX to understand it better), the nice stuff about react was that I could put breakpoints in the code and understand everything. I did not used React recently and I am reading that the develoeprs over-complicated it.

What was great with Flex4 ,WPF, Qt is that you had enough components in the base that you could write your application super fast, I would only create custom components in rare cases like when we needed to show some graphs and bar charts, and creating custom components just implied extending a base Widget and override the render/paint function.

Yeah, I am frustrated with Web frontend and angular, my latest issue was when i deleted some unused property of an object and a GUI just stopped working(blank) without any warning or error, I could not figure this issue in a few minutes so I passed it down to the angular expert (is still not fixed yet so I am not sure what caused it it and especially why no errors)

The appeal of AngularJS was more or less that, somewhat like Rails, it offered a One True Way that mostly worked pretty well. Overcomplicated by today's standards, sure, but remember that AngularJS was a decade ago, back when jQuery was still king and anything like architectural rigor on the frontend had yet to be imagined.

Especially with a team made up mostly of folks with less JS experience, you could better sustain velocity because you just needed one or two people who could build custom controls and otherwise handle complicated stuff, and most folks were perfectly able to build and ship features without nearly so much risk of spaghetti complications as you'd find with a less rigorous framework. That made it a good teaching and learning tool as well; you could start off a junior with a base of AngularJS-specific knowledge, and then generalize that into understanding JS proper and being able to work outside the structure AngularJS provided.

I wouldn't want to go back now, but I did and led a lot of good work with AngularJS, and used it to great effect as a mentoring tool besides. In the context of its time, it was brilliant.

I would disagree, there was no one true way, there are a few ways to do a slect for example, like you can use ng-options or use ng-repat for a li. There is also a sure way to have developers created stupid code where the 2 ways bindings will fire changes into an infinite loop. As an example a simple dropdown could just be like

<DropDown dataProvider="someArray"/>

for a bit more complex stuff you have have attributes like

<DropDown dataProvider="someArray" labelField="name"/>

and for custom stuff you provide your own render function

<DropDown dataProvider="someArray" itemRendered="myRenderFunction"/>

With this architecture 99% of cases will not requiere custom code, just setting some attributes, and the 1% you create your function that paints the item in the list. For all you get for free all the DropDown functionality, like keyboard shortcuts(arrow keys, Enter) . accessibility, all the events(before open, open, opened, before close, closed, hover ) in angular world if you are not super lucky to get pro developers with good angular experience you get a giant mess. They added components much later , not sure what was in angular team head not creating the component stuff from the beginning (I inherited a code base before components were invented in angular)

Edit: maybe angular was better then jQuery or whatever stuff was there in JS world but my issue is the guys that created it appears that they never created desktop or mobile apps, is like soem Google devs in their free time invented this shit from scratch with ZERO experience in GUI toolits, in fact I am wondering how big is the ratio of quality code /total code Google devs are creating. I hope their Fushia team has some competent experienced developers in the team.

> in angular world if you are not super lucky to get pro developers with good angular experience you get a giant mess

True, but you only needed one good Angular dev, in a senior or lead role, to avoid that. I had the enormous privilege of getting to be that person a few years back, and maybe that colors my interpretation a little.

> They added components much later , not sure what was in angular team head not creating the component stuff from the beginning

My impression is that Angular 2 grew components largely in response to and because of React. The concept wasn't precisely new, but React did formulate it in a way that can be fairly called novel.

Componets/Widgets were super old in Desktop world so React did not invented them. This is why I wonder if angular devs ever ever did any GUI development before creating angular, or maybe angular was just a simple toy and for some reason it grew too much.

I can't find 1 good thing to say about angular1(version <=1.5) compared to Qt,WPF,Flex4 . Let me know if you worked with that old version any good thing about it (that is not it is a bit better then bad jQuery code)

Yes, I understood that.

But at the time of Angular's release, ExtJS was already 3 years old.

They don't solve the same problem. ExtJS is a UI toolkit, AngularJS is more of an application framework - Angular doesn't provide complex controls, Ext doesn't provide a defined structure in which to build your code.

>Angular doesn't provide complex controls,

It did not provide simple controls either, no basic DropDown or DataGrid,ListBox. It only made super easy to make Hellpo world apps with the 2-way data bindings and that is all, when things get complex angular can't also gets super complex.

Yes ExtJS could be thought of as a component/ui framework similar to Bootstrap or KendoUI?

Before Angular, Backbone was all the rage (2013) which started the whole front end framework trend and effectively killed jQuery (which was only really good for manipulating the DOM because JavaScript was so fragmented since not every browser supported the JS function... eg. IE6).

Essentially Angular wrapped everything into a nice gift that included Backbone-like MVC type architecture (MVVM), KnockoutJS, and Mustache for Templates (Similar to ERB for Rails?).

I'm definitely incorrect in the descriptions in the plumbing because it feels like ancient history now. Essentially Angular is just a framework like Rails for the Front End. Difference between ExtJS is that it's more heavily into the way the UI widgets worked and behaved whereas Angular is more for the Business Logic and the way the Client Side is structured.

Then IMO angular should have not do GUI part at all, rather then the bad thing they created in angular1.

Honestly I have no idea why would you compare angular with Rails, it includes some basic routing, and some pathetic wrappers for existing native functions, and the $emit/$on , what other plumbing I am forgetting ?

There are still a ton of super quality jQuery plugins for Widgets that are still used today, I seen a lot of angular code just wrapping (badly most of the time) jQuery. And on top of that angularjs used jQuery (or a lite version) too.

Did you wrote desktop or mobile application with the native toolkits ? I am curious if the misunderstandings are because if you only used Web tech then angular would appear to be something great where if you come from Desktop/Mobile you see angularjs as garbage, better then bad jQuery code but probably worse then anything else.

This is a shortcoming of many flash like tools that export to the web (such as unity or adobe animate). I am trying to solve this with https://moos.app It automatically works on all screen dimensions but is not as powerful as flash (yet).

Not really. JS simply outpaced Flash/AS in terms of technology. Better interpreters, better tooling, better governance (and that says a lot, considering how bad the Chrome-Safari controlled web is), etc. Yes, there were a few missing high-level functional requirements that were in the Flash ecosystem. But it turns out most of them are "easy" to implement/port/provide. (See Ruffle.)

Kinda. Flash mostly died because Jobs/iPhone killed it.

Yes and: Adobe were turrible stewards. So much neglect, unrealized potential.

Shameless plug: I'm an engineer at Fable, a browser-based motion graphics editor. We're working to make creating animations more accessible, exactly like the heyday of Flash (but without any binary plugins). And we support exporting to Lottie.


And of course, if you're an engineer and this appeals to you, get in touch! Email in my profile. I love working on software that facilitates creativity.

Thanks for building for the browser, so Linux users like me can use it easily. While native code has its advantages, web apps are getting closer and can be easier to build.

I’m only familiar with Flash as a user, not as developer. I’m curious, what did Flash have, that you can’t readily do with JS and Canvas? Be as broad or specific as you like.

For me it was a combination of IDE that allowed very easily to merge different assets (text, vector graphics, sounds) with basic scripting and a timeline.

Now you kind of have to think in code, and architect the site as a whole, there's less creative impulse, or simply messing around to find something cool. This interactive messing around has to be visual, ideas should be easily copy-pastable, etc.

Because it was easy to experiment with the whole interactive media, and you didn't really have to worry about differences in player (no touch, no mobile, player was independent of browser), you could create wild stuff in very short amount of time, and everyone could play with it in the same way.

I loved Flash. Sure, it wasn't accessible, wasn't SEO-friendly or searchable or linkable, and had no future in mobile, but it was a magical creative canvas quite unlike anything available now.

Think there’s positives and negatives. Some of the stuff possible with canvas is amazing and wouldn’t have even been possible at all in flash really and it does integrate as a first class citizen on the page, doesn’t feel janky like flash did sometimes.

But on the other hand a 12 year old can’t figure it out in a week and ship an animation they made from scratch to the web.

I'd say the major advantage was you had an IDE that had a canvas to draw on, a visual timeline to aide your animation, tweening, powerful scripting - much like Swift, and compilation (ship a self contained SWF binary).

For me the canvas was powerful, I could use a wacom to draw, tween motion between frames and visualize the whole thing quickly with playhead scrubbing, and keyframe tweaking etc.

I don't miss Flash but it would be really interesting to see how it would be used in today's mature webscape.

The Flash IDE still exists, it's called Adobe Animate now.

The Flash interface is primarily visual. It looks more like a video editing app, with timelines and layers.

- Click button X, run Timeline 1. - Click Button Y, run Timeline 2. - Click X again, run Timeline 1 in reverse.

That made it far more intuitive for designers, who can prototype interaction design ideas themselves, instead of leaving it entirely to developers to implement.

The death of Flash led to the death of the creative web, because anything outside of the bounds of CMS templated content required developers to do everything from CSS, JS triggers and deployment. Even today, that workflow persists, but is worse, because creative works can't be bundled into a single executable file like what was possible w/ Flash . Designers now create something in After Effects, which then has to be compiled into code via Lottie, and implemented by a developer.

You could “draw” the whole website, create fairly complex animations and interactions, script everything, and then just publish it.

Now imagine what it means today to create a simple animation, export it to Lottie, incorporate that into a website and publish that. It’s a nightmare. And it’s nowhere near to what was possible with Flash.

It truly did allow for very artistic interactive assets. The ide, tooling, actionscript were quite revolutionary.

Today it could be a paradox of choice situation, for an aspiring creator to produce anything today would require them to pick up a bundle of technologies.

By the time Adobe bought it they didn’t really care that much about the animation and app side of Flash. Seemed to mostly care about it being the video delivery mechanism for the web.

https://rive.app is a free tool to create animations that integrates with a number of 'player libraries' (aka runtimes) that support most modern platforms. Rive focuses more on interactivity, rather than just playing back a small clip like Lottie is.

Wow, thank you for sharing this. I wonder, if you can‘t draw with pen & paper, how much sense does it even make to try creating illustrations like these & animate them? Any dev got experience who transitioned into that? I really like animations and 3D, got a good imagination but i can‘t even draw the simplest stuff…

I felt the same way but recently I've been learning a bit of Inkscape and it's easier than it initially feels even with a mouse and keyboard. 2dgameartguru has some nice tutorials you can reference to get an idea for how the tools are used https://2dgameartguru.com/category-selection-inkscape/

Nice, that looks cool. Thank you!

Beware that there is some impact with both generating large Lottie files and especially with bundling. It is all too easy - if you are webpacking all of your assets together - to suddenly have 1kb of useful code and 200+ kb of animations. I've seen it happen also that Lottie animations got fed into Babel inside of the Webpack pipeline leading to the node process quitting due to lack of memory.

Might partly have to do with the addiction of JS folks to bundle everything into one file, but it might be a good idea to `fetch()` your lottie animations lazily when you actually need to display them.

That's a real pro-tip! Lottie animation JSONs are better left out of the bundling and loaded dynamically.

We built dotLottie[1], a little superset encapsulation layer ontop of Lottie as an experiment/solution to make it easer to bundle multiple Lotties and any associated assets AND make distribution/CDN use simpler. There are several sites that are using it now with good success.

1. https://dotlottie.io/

Good point about lazily fetching some animations can be a good idea.

Not sure that all, most, or even many JS folks are addicted to bundling everything into one file.

I've used Lottie animations in the past for custom animations of UI elements. Was pretty straightforward and the results looked good. Lots of people are complaining about how heavy it can be, but small UI animations and the lightweight player leave a fairly small footprint.

I wrote up a starter blog on using Lottie for UI in React here: https://labs.thisdot.co/blog/using-lottie-animations-for-ui-...

If you don't want to make your own animations, you can download a ton of free ones to use here: https://lottiefiles.com/

I recently threw together a React page that included some Lottie’s. Impressive! Had a couple issues with bundled bitmap assets but pretty easily overcome with Data URIs. I’ll definitely keep it in the ol’ tool-belt.


On mobile, there’s no padding between the text on this page and the borders of the screen, which makes it a bit hard to read

The scrolling experience is a bit frustrating, but the animation is beautiful!

Yeah I told them users hate that. ¯\_(ツ)_/¯

We've used it a bit to make good looking splash screens / loading animations.

But trying to go "all in", animating every little aspect of intersection as some of the showcases do, isn't worth it. Hard to maintain, since you need someone good at after effects to make an effect every time something on the frontend changes. And few designers know AE. So quickly end up with some parts being fancily animated, and the rest dull, making the contrast jarring. And while the animations when clicking 5-stars or whatever look cool in a video, they are mostly artificial delays for the user getting on with their tasks.

LottieLab lets you create and edit Lottie animations without having to deal with AE. I'm not an AE expert (which seems to be the bottleneck for creating these types of animations), so tools like these seem interesting.


Every time I've shown this to the designers, (full design team at a corporation, single designer at a startup, small design team) everyone says it looks cool but then it never gets used because nobody on the team has any experience using After Effects and no one has time to learn for cool looking but ultimately superfluous animations.

It sounds like it fits one very specific scenario: a coder and designer(that had made all their work in AE) working together and the coder can now dodge the tedium of programming animations.

However I prefer Hype (from Tumult) because it’s found that middle ground in simplicity while still being able to integrate real-world web. For that reason a designer(or coder really) can pick up Hype and not need anyone else. It reminds me a little of Flash, but the underpinning technology is javascript.

For example in Hype it’s straight forward to build animated and compliant html5 google ads. That’s something a designer can do all on their own without any coding, the entire process is contained to that one app. Similarly a designer can make a fully animated reactive website and not need to touch code at all.

Also Hype is $50 once. AE is either $240 per year or part of the Adobe creative cloud subscription which is around $600 per year.

AE is not difficult, many designers know it (especially those who worked with Flash). The problem is that AE let’s you easily create stuff that is completely detached from technological reality and impossible to implement.

Sadly Lottie is a huge dependency, for one or two animations I find it wasteful to even add it. Another downside is that your lighthouse score gets negatively affected since the animation is seen as busy time so your time until interactive becomes very long. I'm always looking for a smaller alternative

For the vast majority of use cases, you could try using the jlottie player (15kb gzipped) instead of lottie-web. jlottie was built to support a limited set of Lottie features, based on the data we have, to support 80+% of the Lottie animations we typically see.


lazy load it

I have found that doesn't cut it anymore, at least for above the fold content. I think lighthouse waits until your CPU use drops and that is considered the end of the page processing. But it changes so fast I could already be wrong again.

And if you want to use lottie outside the official envs, Skia have full support for it: https://skia.org/docs/user/modules/skottie/

I have built a Haxe runtime for playing nested animations from Animate CC. It is extremely performant since it utilises texture atlases, and the library is very small. I am very surprised that there aren’t more runtimes built for the “Export as Texture Atlas” feature, since it really isn’t very difficult to build the runtime, and the nature of Animate CC nested timelines facilitates a very flexible and fast workflow.

We used Lottie in the logo of the new Stephen Hawking site.


How much work was that? It does look simple to me, however i feel, i would need way more time than i should, for something like that.

Took around 7 seconds to load for me on an iPhone 11.

Nice! Looks a little choppy on an iPhone XS, however.

This is more efficient than pngs or gifs, no question.

But modern browsers do movies (like, mp4 and ogg) really well, with no required chrome, a rendering engine that is very good and easily controlled by js.

I wonder how a animation in Lottie compares to a embedded video tag of the same animation.

Isn't js JIT (slower), and evaluated higher in the stack (slower) than the video renderer?

Video codecs are designed primarily for imagery coming from a camera. They don't cope with sharp edges like vector shapes especially well - edges get blurry and blocky. Videos are also not scalable; if you stretch them for a bigger screen or zoom in, they get pixelated. You can encode with more sharpness or higher resolution, but that makes your files bigger.

Little uses a vector format, so the results are sharp whatever the scale, with the same file size. However, each additional picture element may cost more in comparison.

Some animations will be best in one, some in the other.

So Lottie would be the video equivalent of the SVG format, in a way? That sounds like something that should/will be supported natively at some point.

In my experience, we primarily use Lotte in UI animations where transparency is important for overlaying effects and elements.

I realise now you can bake in an alpha channel to some video formats, but both support and production of these files is cumbersome and Lotte is great from a workflow perspective -- particularly if you have dedicated 'motion designers' on your design team who are accustomed to After Effects already.

How accessible are Lottie animations? Can they include (keyboard accessible) hotspot links? ARIA markup? How much work would it take to make sure a Lottie animation respected user preferences like prefers-reduced-motion?

I don't think screen readers will attempt reading an svg. You can also wrap the svg tag in an element with a title or aria-describedby attribute

Couldn't find a demo except that GIF.

You can find a bunch of examples here: https://lottiefiles.com/featured

I'm confused as well. I right click on the animation and I can open it up as an image in a tab? https://airbnb.io/lottie/images/Introduction_00_sm.gif

Is there a way to create the animation file with an open source tool (as opposed to adobe after effects)?

You might want to look into Synfig https://github.com/synfig/synfig

Here is how to export to Lottie https://synfig.readthedocs.io/en/latest/export/export_for_we...

Free or open-source?

Why are you asking? Could you elaborate?

Because Im wondering how an opensource digital visual effects software would be different than closed source. I can understand frameworks, privacy critical and security risk software but why such a huge software be made open source. If you are asking for Free thats a different discussion. If you want it to be opensource (with a reason) and still pay for it, thats different. My intention is not to mean people can’t afford. Genuinely curious what they’re expecting from such a huge software.

This looks pretty cool but right now I don't have any animation software.

To fill that need I've been using svgator (https://www.svgator.com/) to create some simple animations. It can SVG files with embedded animations and no JavaScript.

I have haven't gotten too deep into it, but as someone who has done quite a bit of work in Flash, Adobe Premiere, and Final Cut Pro; it seems to be a pretty full-featured animation software. I didn't have to read any documentation and got my animations finished quickly.

We converted our lottie animations to mp4 because the JS file + JSON files are too big, and can't be streamed (they're blocking), they hurt SEO

this looks incredibly useful, i never added animations to my website because it was such a hassle. going to give it a try, thanks for sharing!

They should add the Flutter package for it on the "third party platform" page! :) (https://airbnb.io/lottie/#/other-platforms)


It is pretty great . I used it on a RN project a few months ago.

There is an amazing collection of animations to choose from here: https://lottiefiles.com/.

You can also buy after effects templates on many websites and use them for motion graphics.

Cool resource, thank you.

I thought AirBnB ditched React Native. I guess they still use React for web, or this is from the olden times.

This also has plain iOS and android runtimes.

I’ve used Lottie to render animations (used in place of images rather than as UI elements) on a couple of websites and was impressed how smoothly it worked and how easy it was to get up and running. I’ve no idea how complex it is to make the actual animations though!

One of Lottie’s most useful feature for me has been its support for transparency.

Ugh the player adds 66kB gzip to your project.


I can’t see any examples of explosions, is that supported? (One may build a pretty successful site on it)

Edit: seems svg-like particle effects only, so no

Awesome tool. Powered much of the Target iOS app when I was there, down to the animated checkboxes.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact