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.
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.
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.
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:
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.
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.
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:
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.
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…
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.
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 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.
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.
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.
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.
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.
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?
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.
[+] [-] circlingthesun|4 years ago|reply
[1] https://www.npmjs.com/package/bodymovin-to-smil [2] https://bundlephobia.com/package/[email protected] [3] https://bugs.chromium.org/p/chromium/issues/detail?id=482689 [4] https://caniuse.com/svg-smil [5] https://bookem.com
[+] [-] lekevicius|4 years ago|reply
[+] [-] pcmaffey|4 years ago|reply
[1] https://www.pcmaffey.com
[+] [-] udbhavs|4 years ago|reply
https://www.haikuanimator.com/
https://glaxnimate.mattbas.org/
[+] [-] 8toast|4 years ago|reply
[+] [-] jawishhameed|4 years ago|reply
https://lottiefiles.com/plugins/animate
PS: I work for LottieFiles and built the plugin.
[+] [-] gresrun|4 years ago|reply
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/
[+] [-] kall|4 years ago|reply
https://createwithflow.com
[+] [-] creakingstairs|4 years ago|reply
[+] [-] makomk|4 years ago|reply
[+] [-] kanwisher|4 years ago|reply
[+] [-] goforbg|4 years ago|reply
[+] [-] nyanpasu64|4 years ago|reply
[+] [-] fassssst|4 years ago|reply
https://docs.microsoft.com/en-us/windows/apps/design/control...
Disclosure: I work at Microsoft.
[+] [-] josefrichter|4 years ago|reply
[+] [-] rimher|4 years ago|reply
[+] [-] endofreach|4 years ago|reply
[+] [-] unknown|4 years ago|reply
[deleted]
[+] [-] julik|4 years ago|reply
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.
[+] [-] jawishhameed|4 years ago|reply
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/
[+] [-] ahuth|4 years ago|reply
Not sure that all, most, or even many JS folks are addicted to bundling everything into one file.
[+] [-] tvanantwerp|4 years ago|reply
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/
[+] [-] Eric_WVGG|4 years ago|reply
https://theworkingassembly.com/labs
[+] [-] jamespwilliams|4 years ago|reply
[+] [-] Zababa|4 years ago|reply
[+] [-] matsemann|4 years ago|reply
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|4 years ago|reply
https://lottielab.io
[+] [-] Larrikin|4 years ago|reply
[+] [-] quitit|4 years ago|reply
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.
[+] [-] danfritz|4 years ago|reply
[+] [-] jawishhameed|4 years ago|reply
https://github.com/LottieFiles/jlottie
[+] [-] nfRfqX5n|4 years ago|reply
[+] [-] SoapSeller|4 years ago|reply
[+] [-] JoeyJoJoJr|4 years ago|reply
[+] [-] rikkipitt|4 years ago|reply
https://www.hawking.org.uk
[+] [-] endofreach|4 years ago|reply
[+] [-] halpert|4 years ago|reply
[+] [-] sam1r|4 years ago|reply
[+] [-] sam_goody|4 years ago|reply
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?
[+] [-] mkl|4 years ago|reply
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.
[+] [-] nness|4 years ago|reply
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.
[+] [-] rikroots|4 years ago|reply
[+] [-] darepublic|4 years ago|reply
[+] [-] rado|4 years ago|reply
[+] [-] thih9|4 years ago|reply
[+] [-] durazabu|4 years ago|reply
Here is how to export to Lottie https://synfig.readthedocs.io/en/latest/export/export_for_we...
[+] [-] anaganisk|4 years ago|reply
[+] [-] hahamrfunnyguy|4 years ago|reply
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.