At the moment for me Lottie is a flag and I'm trying to figure out whether it's a red one or a yellow one. I just found out on Friday that one of our designers decided to use it and has provided us a bunch of little animated 150x150 Lottie icons, embedded in a Figma design. I'm like, what on earth is Lottie? And it's explained to me that we're supposed to embed some Javascript app so that we can display these little icons from a CDN. So many random bad smells coming from this.
How much trouble are we in? Can we convert these Lottie things into animated GIFs or something? I have the feeling that this idea of embedding Javascript to animate small, simple icons cannot be good and is going to screw up all the hard work we do on performance and good CWV. I can't believe I'm Googling around for free websites that make animated GIFs right now. It feels like 2003 again. I don't even know who owns or wrote this whole Lottie ecosystem and what all these sub-brands like "Lottie Files" are but I'm expected to embed their code.
Yes, you're right to be worried. It's really not great fit for micro interactions (`like/unlike` buttons etc.). If you're animating a spinner, then that animation will probably take more resources and be more fragile than the thing you're showing the spinner for.
GIF is still probably worse, though, I wouldn't do that. Your best bet is to try to do what I hinted and want to try at some point: extract frames from the animation as svg, put it into a sprite img (and run svgo on it) and then animate that sprite with background-position or css transform.
Extracting the frames can be done with puppeteer, there's a tool for that https://github.com/transitive-bullshit/puppeteer-lottie, it can output video or gif, but I'm not sure if it can do the whole sprite thing, yet. You might need to do that manually.
[edit]: I'm assuming you talk about the web. Mobile lottie might be different and maybe fine, but I don't have experience with that.
Thanks for the ideas. This is indeed the web. The Lottie stuff in question is a couple of decorative, 100x100 animated line art drawings.
When I dug into the Figma file, they were extractable as 450kb, 640x640 animated GIFs.
I ran one of those through some website called ezgif which converted it to a 100x100 animated webp image at 64kb. Think it's lossy but quality looks acceptable for our purposes. Gimp didn't seem to be able to resize an animated GIF properly.
This seems like a roundabout way to get where we want to be, but a 64kb animated webp seems like a much better situation than embedding the Lottie player js.
Why is GIF worse (I'm not a frontend developer, so I'm genuinely curious)?
GIF is a format from the 1980s that has not changed or improved one bit since. It's limited to a 256-color palette per frame, which on top of looking bad, will massively bloat your file size as a common strategy to make it look less bad is to re-select a new palette each frame. It's massively worse than a modern lossless (or perceptually lossless) video codec and there are no real benefits to it except backwards compatibility on account of the whole "unchanged in 40 years" bit.
Most sites and platforms silently swap out uploaded GIFs for re-encoded MP4s with no loss in quality due to how awful GIF is as a format. Telegram reports saving 95% on storing GIFs by doing that instead.
GIF animations will autoplay where video embeds often will not esp on mobile. For a looping low color vector animation it might not be too bad.
Video embeds can be made to autoplay, browsers typically don't block them if the video is muted, and JS can be used to nudge them along if they do.
With the automatic conversion of GIFs into video, this also isn't a property that can be relied on for GIF as an end-user. See Xitter, where their buggy scroll position detection takes over playing and pausing GIFs.
> Can we convert these Lottie things into animated GIFs or something
You might be able to convert them to SMIL (SVG Animations), which is still pretty well supported and does not require any JS dependencies:
https://github.com/bodymovin/bodymovin-to-smil
This is a repo by the original author of the lottie format, it's not super well maintained though, and it only supports limited animation features.
Thanks, I didn't know about this one. That could work for me, I have to try.
Beyond Lottie I think that how your company is making tech decisions is bigger red flag… Just what you described seems crazy they can come up that solution just a few icons. I can’t imagine what it has to be for the rest. It’s unfortunately very hard to change once those type of people are in place and this culture is the norm.
I own the company, and the issue came to my attention in a 1:1 with an engineer last week. I can decide and communicate what the policy will be, and the matter will be settled.
The hard question as always is what constitutes a good policy!
What happened here was that a well-meaning and talented designer passed a Figma along to the dev team and the Figma included these Lottie things and a note about how to embed a chunk of js to display them. It caught the dev & myself off guard because neither of us had even heard of Lottie but I guess it might be getting popular with designers.
Considering that there actually seems to be an animated GIF embedded in the Figma file, I don't really know the intimate details of said designer's workflow and I think we just need to tell them "This Lottie player thing is not going on any website we produce, but an animated image certainly can, so is it prudent for you to alter your workflow? What is the optimal handoff step?"
I've been in one of those... You spend 4 hours removing half of the dependencies that are used in one line of code, the next day there are 20 more.
Take 20 min to read over the source code of the Lottie npm package and you’ll have your answer.
I did this years ago and it was one of the most ghastly piles of vanilla JavaScript I’d seen in awhile. I get the feeling that hasn’t changed.