12 ms·

Lottie – Use after effects animations in web and native apps

283 points by udbhavs 5y ago

rikkipitt 5y ago
We used Lottie in the logo of the new Stephen Hawking site. https://www.hawking.org.uk https://www.hawking.org.uk
- sam1r 5y ago
  Nice! Looks a little choppy on an iPhone XS, however.
- endofreach 5y ago
  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.
- halpert 5y ago
  Took around 7 seconds to load for me on an iPhone 11.
kerbs 5y ago
Awesome tool. Powered much of the Target iOS app when I was there, down to the animated checkboxes.
pier25 5y ago
Ugh the player adds 66kB gzip to your project. https://bundlephobia.com/package/lottie-web@5.8.1 https://bundlephobia.com/package/lottie-web@5.8.1
yagudaev 5y ago
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/ https://lottiefiles.com/. You can also buy after effects templates on many websites and use them for motion graphics.
- kingcharles 5y ago
  Cool resource, thank you.
11235813213455 5y ago
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
fassssst 5y ago
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: https://docs.microsoft.com/en-us/windows/apps/design/controls/animated-icon#use-lottie-to-create-animated-content-for-an-animatedicon https://docs.microsoft.com/en-us/windows/apps/design/control... Disclosure: I work at Microsoft.
udbhavs 5y ago
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: https://www.haikuanimator.com/ https://www.haikuanimator.com/ https://glaxnimate.mattbas.org/ https://glaxnimate.mattbas.org/
- gresrun 5y ago
  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/ https://skia.org/docs/user/modules/skottie/ [1]: https://skottie.skia.org/ https://skottie.skia.org/ [2]: https://skia.org/ https://skia.org/ [3]: https://skia.org/docs/dev/flutter/ https://skia.org/docs/dev/flutter/
- jawishhameed 5y ago
  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. https://lottiefiles.com/plugins/animate https://lottiefiles.com/plugins/animate PS: I work for LottieFiles and built the plugin.
- kanwisher 5y ago
  Just started looking at Lottie recently, the stuff is awesome
- creakingstairs 5y ago
  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!
  - Abishek_Muthian 5y ago
    Same here, only reason I didn't pursue Lottie was because of AE. How's the non AE ecosystem for Lottie?
  - josefrichter 5y ago
Eric_WVGG 5y ago
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. https://theworkingassembly.com/labs https://theworkingassembly.com/labs
- jamespwilliams 5y ago
  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
- Zababa 5y ago
  The scrolling experience is a bit frustrating, but the animation is beautiful!
  - Eric_WVGG 5y ago
    Yeah I told them users hate that. ¯\_(ツ)_/¯
Larrikin 5y ago
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.
- quitit 5y ago
  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.
- josefrichter 5y ago
  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.
matsemann 5y ago
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.
raviisoccupied 5y ago
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. https://lottielab.io https://lottielab.io
thih9 5y ago
Is there a way to create the animation file with an open source tool (as opposed to adobe after effects)?
- anaganisk 5y ago
  Free or open-source?
  - thih9 5y ago
    Why are you asking? Could you elaborate?
    - anaganisk 5y ago
      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.
- durazabu 5y ago
  You might want to look into Synfig https://github.com/synfig/synfig https://github.com/synfig/synfig Here is how to export to Lottie https://synfig.readthedocs.io/en/latest/export/export_for_web_lottie.html https://synfig.readthedocs.io/en/latest/export/export_for_we...
Flankk 5y ago
I thought AirBnB ditched React Native. I guess they still use React for web, or this is from the olden times.
- kall 5y ago
  This also has plain iOS and android runtimes.
rado 5y ago
Couldn't find a demo except that GIF.
- abrookewood 5y ago
  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 https://airbnb.io/lottie/images/Introduction_00_sm.gif
- thomasikzelf 5y ago
  You can find a bunch of examples here: https://lottiefiles.com/featured https://lottiefiles.com/featured
rimher 5y ago
https://rive.app 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.
- deleted 5y ago
  [deleted]
- endofreach 5y ago
  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…
  - udbhavs 5y ago
    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/ https://2dgameartguru.com/category-selection-inkscape/
    - endofreach 5y ago
      Nice, that looks cool. Thank you!
prisout64 5y ago
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!
saltmeister 5y ago
wruza 5y ago
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
tomduncalf 5y ago
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!
fsto 5y ago
One of Lottie’s most useful feature for me has been its support for transparency.
sam_goody 5y ago
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?
- nness 5y ago
  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.
- mkl 5y ago
  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.
  - Zababa 5y ago
    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.
danfritz 5y ago
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
- jawishhameed 5y ago
  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. https://github.com/LottieFiles/jlottie https://github.com/LottieFiles/jlottie
- nfRfqX5n 5y ago
  lazy load it
  - ehnto 5y ago
    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.
JoeyJoJoJr 5y ago
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.
julik 5y ago
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.
- ahuth 5y ago
  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.
- jawishhameed 5y ago
  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/ https://dotlottie.io/
josefrichter 5y ago
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.
- CommanderData 5y ago
  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.
- whywhywhywhy 5y ago
  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.
- silverlyra 5y ago
  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. https://fable.app https://fable.app 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.
  - yaomtc 5y ago
    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.
- k__ 5y ago
  Again, mindset beat technology. ActionScript and Flex were more powerful than JavaScript and HTML, still the latter won because it was open.
circlingthesun 5y ago
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 https://www.npmjs.com/package/bodymovin-to-smil [2] https://bundlephobia.com/package/lottie-web@5.8.1 https://bundlephobia.com/package/lottie-web@5.8.1 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=482689 https://bugs.chromium.org/p/chromium/issues/detail?id=482689 [4] https://caniuse.com/svg-smil https://caniuse.com/svg-smil [5] https://bookem.com https://bookem.com
- pcmaffey 5y ago
  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 https://www.pcmaffey.com
  - anchpop 5y ago
    I saw your site yesterday and forgot to comment on it then - I wanted to say thanks for the great articles and interesting animations.
- lekevicius 5y ago
  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.
  - 5y ago
SoapSeller 5y ago
And if you want to use lottie outside the official envs, Skia have full support for it: https://skia.org/docs/user/modules/skottie/ https://skia.org/docs/user/modules/skottie/
tvanantwerp 5y ago
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-components-in-react 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/ https://lottiefiles.com/
nur23kg 5y ago
rikroots 5y ago
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?
- darepublic 5y ago
  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
thatguyagain 5y ago
They should add the Flutter package for it on the "third party platform" page! :) (https://airbnb.io/lottie/#/other-platforms https://airbnb.io/lottie/#/other-platforms) https://pub.dev/packages/lottie https://pub.dev/packages/lottie
hahamrfunnyguy 5y ago
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/ 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.

283 points by udbhavs 5y ago

rikkipitt 5y ago

We used Lottie in the logo of the new Stephen Hawking site. https://www.hawking.org.uk https://www.hawking.org.uk

sam1r 5y ago
Nice! Looks a little choppy on an iPhone XS, however.
endofreach 5y ago
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.
halpert 5y ago
Took around 7 seconds to load for me on an iPhone 11.

kerbs 5y ago

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

pier25 5y ago

Ugh the player adds 66kB gzip to your project. https://bundlephobia.com/package/lottie-web@5.8.1 https://bundlephobia.com/package/lottie-web@5.8.1

yagudaev 5y ago

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/ https://lottiefiles.com/. You can also buy after effects templates on many websites and use them for motion graphics.

kingcharles 5y ago
Cool resource, thank you.

11235813213455 5y ago

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

fassssst 5y ago

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: https://docs.microsoft.com/en-us/windows/apps/design/controls/animated-icon#use-lottie-to-create-animated-content-for-an-animatedicon https://docs.microsoft.com/en-us/windows/apps/design/control... Disclosure: I work at Microsoft.

udbhavs 5y ago

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: https://www.haikuanimator.com/ https://www.haikuanimator.com/ https://glaxnimate.mattbas.org/ https://glaxnimate.mattbas.org/

gresrun 5y ago
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/ https://skia.org/docs/user/modules/skottie/ [1]: https://skottie.skia.org/ https://skottie.skia.org/ [2]: https://skia.org/ https://skia.org/ [3]: https://skia.org/docs/dev/flutter/ https://skia.org/docs/dev/flutter/
jawishhameed 5y ago
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. https://lottiefiles.com/plugins/animate https://lottiefiles.com/plugins/animate PS: I work for LottieFiles and built the plugin.
kanwisher 5y ago
Just started looking at Lottie recently, the stuff is awesome
creakingstairs 5y ago
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!
- Abishek_Muthian 5y ago
  Same here, only reason I didn't pursue Lottie was because of AE. How's the non AE ecosystem for Lottie?
- josefrichter 5y ago

Eric_WVGG 5y ago

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. https://theworkingassembly.com/labs https://theworkingassembly.com/labs

jamespwilliams 5y ago
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
Zababa 5y ago
The scrolling experience is a bit frustrating, but the animation is beautiful!
- Eric_WVGG 5y ago
  Yeah I told them users hate that. ¯\_(ツ)_/¯

Larrikin 5y ago

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.

quitit 5y ago
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.
josefrichter 5y ago
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.

matsemann 5y ago

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.

raviisoccupied 5y ago

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. https://lottielab.io https://lottielab.io

thih9 5y ago

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

anaganisk 5y ago
Free or open-source?
- thih9 5y ago
  Why are you asking? Could you elaborate?
  - anaganisk 5y ago
    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.
durazabu 5y ago
You might want to look into Synfig https://github.com/synfig/synfig https://github.com/synfig/synfig Here is how to export to Lottie https://synfig.readthedocs.io/en/latest/export/export_for_web_lottie.html https://synfig.readthedocs.io/en/latest/export/export_for_we...

Flankk 5y ago

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

kall 5y ago
This also has plain iOS and android runtimes.

rado 5y ago

Couldn't find a demo except that GIF.

abrookewood 5y ago
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 https://airbnb.io/lottie/images/Introduction_00_sm.gif
thomasikzelf 5y ago
You can find a bunch of examples here: https://lottiefiles.com/featured https://lottiefiles.com/featured

rimher 5y ago

https://rive.app 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.

deleted 5y ago
[deleted]
endofreach 5y ago
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…
- udbhavs 5y ago
  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/ https://2dgameartguru.com/category-selection-inkscape/
  - endofreach 5y ago
    Nice, that looks cool. Thank you!

prisout64 5y ago

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!

saltmeister 5y ago

wruza 5y ago

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

tomduncalf 5y ago

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!

fsto 5y ago

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

sam_goody 5y ago

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?

nness 5y ago
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.
mkl 5y ago
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.
- Zababa 5y ago
  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.

danfritz 5y ago

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

jawishhameed 5y ago
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. https://github.com/LottieFiles/jlottie https://github.com/LottieFiles/jlottie
nfRfqX5n 5y ago
lazy load it
- ehnto 5y ago
  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.

JoeyJoJoJr 5y ago

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.

julik 5y ago

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.

ahuth 5y ago
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.
jawishhameed 5y ago
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/ https://dotlottie.io/

josefrichter 5y ago

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.

CommanderData 5y ago
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.
whywhywhywhy 5y ago
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.
silverlyra 5y ago
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. https://fable.app https://fable.app 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.
- yaomtc 5y ago
  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.
k__ 5y ago
Again, mindset beat technology. ActionScript and Flex were more powerful than JavaScript and HTML, still the latter won because it was open.

circlingthesun 5y ago

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

pcmaffey 5y ago
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 https://www.pcmaffey.com
- anchpop 5y ago
  I saw your site yesterday and forgot to comment on it then - I wanted to say thanks for the great articles and interesting animations.
lekevicius 5y ago
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.
- 5y ago

SoapSeller 5y ago

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

tvanantwerp 5y ago

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-components-in-react 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/ https://lottiefiles.com/

nur23kg 5y ago

rikroots 5y ago

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?

darepublic 5y ago
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

thatguyagain 5y ago

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

hahamrfunnyguy 5y ago

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/ 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.