Show HN: Lottielab – Create product animations in the browser easily | Hacker News Reader

Show HN: Lottielab – Create product animations in the browser easily

lottielab.com

154 pointsthegeomaster57 comments

Hi HN! Today we are releasing Lottielab, a web-based animation tool, to the public as an open beta. The main tool for editing and exporting Lottie animations today is Adobe After Effects, a 30-year-old visual effects tool that’s not fit for this purpose, has a steep learning curve, and requires a patchwork of error-prone plugins. With Lottielab, we are aiming to reduce the friction of creating and editing product animations by providing an easy-to-use editor with out-of-the-box support for import and export of the Lottie format and many others. Feel free to play around with the tool and let me know what you think - I'm here to answer your questions. Happy animating!

Open articleView on HN

This is great! One thing that has somewhat stopped us from using lottie files for animations is getting someone who has the tools and knows how to make them.

I just started a new app the other day, and was going to build my animations using charting libraries. Now I've got another option.

Congrats on the launch!

Out of curiosity, why did you decide to not allow google or other sign-in, and why do you need my name?

It may seem like a simple thing, but it is a barrier that I believe most people don't think of when using social logins, you get access to the name, and don't need to manage passwords (obvs).

In the app we're building, I'm considering releasing without account sign-up at all.

Thank you! Yes, we've noticed that the barrier to entry for creating lotties was something that was hindering their adoption. This was one of the driving ideas behind the creation of Lottielab.

> Out of curiosity, why did you decide to not allow google or other sign-in, and why do you need my name?

It wasn't an intentional decision to not support social login, it had more to do with prioritization. Our focus for the public release was much more on getting the MVP features of the editor right. But you raise a good point and we'll work on more login options. For the name, it's used mostly for identification within the team and sharing features. I totally understand your concerns, of course feel free to use a pseudonym.

> In the app we're building, I'm considering releasing without account sign-up at all.

This is IMO a good idea. A "guest mode" for Lottielab is definitely a development direction to consider, especially since a big part of the app is on the frontend anyhow.

> I just started a new app the other day, and was going to build my animations using charting libraries. Now I've got another option.

I know it's a cliche to say this, but we are obsessed about user experience, so if you need any help, notice anything amiss or have a suggestion for features, please let us know via our Discord (https://discord.gg/3r9GcBUAZa) or by emailing hello@lottielab.com. We respond and act quickly.

User names are useful in a team context: when you see who created a file or who is currently modifying the file with you. Also when receiving the email invite to a team / project.

Otherwise, you'd have to display the full email, which isn't as readable.

Using social logins would definitely help in making the sign-up simpler (but I guess you still need it in the form if using email login option though).

This is wonderful!

I co-founded a suite of flash design apps called Aviary back in 2007, so know how hard it is to pull of what you've done here.

I'm really blown away by what you created here. Super intuitive, very powerful, and solves a real product need (I literally was talking with my designer earlier about how hard using After Effects was).

Great work!

I remember those!

I don't remember if I ever got to use them, but I remember reading about them and being super impressed.

Obviously didn't catch on the way Figma did, but was the first salvo in that direction that made people go "maybe we're not stuck with Adobe."

Although, sadly, figma is about to be owned by adobe.

I never bothered learning Figma.

I know Adobe well, and I don't use design tools often enough to have value in using Figma.

That said, I hope they don't fuck it up like they did Flash.

Thank you so much! If you or your designer end up using it for a project, we'd love to hear your feedback. We're reachable via hello@lottielab.com or on Discord: https://discord.gg/3r9GcBUAZa.

Oh my god I remember Aviary!

I was truly mind blown by how amazing those tools were in the browser. And so many different applications too!

Really impressive product! I can’t imagine it was easy trying to find a profitable market with the competition you had. But it was an infinitely useful suite and a technical marvel.

Every lottie editor seems to be behind the cloud, gatekeeping the software and other useful things like your edit history behind a subscription. I'm waiting for the standalone desktop Lottie/SVG animation editor I can purchase so I don't have to toggle my subscription especially for the 2 months of the year that I need it.

Synfig?

Thanks. Next time I do vector animation for web, I’ll try this. My vibe is that it being an open source product means it’s going to be super rough around the edges, but at least I can yak-shave a PR to fix any major problems I encounter

I'd like to see more about you on your page.

My first question was "Is this from Airbnb? People who used to work on Lottie/Airbnb branching out? An independent startup?"

I can see from your HN profile that you're in Serbia and don't have any obvious connections to Lottie/Airbnb. If I hadn't found that, I would still be wondering.

Since it looks like this is a SaaS play, it's particularly nice to know about who's making it/how likely it is to survive. It's also nice to know where your data is going/how secure it is likely to be.

Respectfully: who cares? When I go to Vercel (or any React project), I don't wonder if the company is from Meta.

Lottie is open source, it's been spun off from Airbnb (https://medium.com/airbnb-engineering/continuing-our-support...), and while I agree that the questions at the end of your post are valid, I don't think putting more "about them" is how to answer them - afaik where your 'data' is going has nothing to do with where the founders worked/lived.

Agree wholeheartedly. I am glad we are finally getting away from highlighting founders so much.

Does this answer your question? https://www.crunchbase.com/organization/lottielab

https://rive.app/ Rive has better performance than Lottie, I’m not affiliated in anyway

It depends on the content of the file and method of delivery, by default most lottie animations have a similar performance profile to rive animations, the only notable difference being that rive animations have a smaller uncompressed file size due to using a binary rather than a text format. However since most files in production are delivered with gzip compression enabled, the size sent over the wire is pretty much indistinguishable between the two formats.

This isn’t accurate. Rive files have better metrics across the board, see our tests here. https://rive.app/blog/rive-as-a-lottie-alternative

Also, even with compression, Rive files are smaller. One immediate benefit (amongst many) is the low impact on memory that an intrinsically tiny format like Rive has. See my thread with a Lottie engineer here https://x.com/guidorosso/status/1603189817382010882?s=46&t=_...

I really like rive, but they don't support react native with expo, which is becoming super common in the space.

Would be nice to be able to record movement (click and drag) instead of having to manually do so frame-by-frame or some preconfigured tween

Oh, how is this different to https://rive.app/ ?

For one thing, Rive is built for runtime and interactivity. Unlike Lottie, which is built on the After Effects format to basically generate vector gifs.

More on why that’s important: https://rive.app/blog/a-new-graphics-format-for-the-interact...

Some comparison numbers between Rive and Lottie: https://rive.app/blog/rive-as-a-lottie-alternative

I first learned to code (and animate!) on Macromedia Flash. Their tooling for animation and tweens made it so accessible for someone who hadn't had much exposure until then. I've been waiting for someone to port that over to HTML5, and am really excited at the prospect of this being it!

Hmm, in chrome and edge the tab just crashes for me on the landing page when my cursor goes over the editor. `RESULT_CODE_KILLED_BAD_MESSAGE` is the only error I can find, I know that's probably not very useful though.

Really strange. Are you perhaps on Linux?

Sorry, should've included: windows 11/rtx 4090 (drivers are up to date, browsers are up to date)

Thanks, I'll try to get my hands on a Windows machine to repro. Unfortunately it sounds like the content process crashes, which could be for a multitude of reasons, from out-of-memory to an engine bug triggered by something that happens on the page.

FWIW, you can bypass the landing page by going directly to https://www.lottielab.com/sign-up or https://www.lottielab.com/login, if you want to try the editor.

Neat! Can you make the examples open in the editor?

Not at the moment - sorry! We had a lot on our plate for this launch so had to postpone some non-critical parts. Rest assured we'll get this working very soon.

This looks great, definitely gonna try it out.

One tip: add social login buttons (login with Google/GitHub), eases the sign up proces.

Thanks! Yes, a sibling comment has mentioned this too, agree it's worthwhile.

How far away are we from "type in a prompt, get an animation" generative style UX?

What are some roadblocks of making that a reality?

Interesting question!

From some anecdotal experience, large language models struggle with spatial structure (which makes sense given their modality and training data). On the other hand, diffusion models create great images, but this does not translate very well to vector data.

Animation is not a very well researched modality for AI, so it could go either way. It's definitely an interesting direction to consider, as it can democratize motion design even further.

True, but in my (limited) understanding, a lottie animation is just json right? I've gotten some really impressive json results with GPT.

It's a JSON structure full of numbers which describe colors and spatial relationships. LLMs have no problem with the JSON syntax, but the numbers they put in it will be nonsense.

Animations require consistency to work and generations are still very bad at consistency. You can see this in action through any AI generated video, that "flickering" are tiny inconsistencies between frames that throw the entire thing off.

Once that issue is fixed, then it's a green light as everything else is vaguely ready.

I think you're talking about generating bitmaps of video, one frame at a time - which is a pretty different task from generating vector animation. If the LLM is approaching the task like an animator would (i.e. I want this shape to move here slowly for a long time, then grow rapidly for a short duration, then...) and expressing the result in some kind of keyframe animation format (Lottie, AE, Unity, etc.) then you aren't having to deal with the kinds of artifacts you described.

Pretty close. Not the same kind of animation, but here are some of my experiments with text to video for narrative content:

https://www.youtube.com/watch?v=CgKNTAjQpkk

https://youtu.be/X0AhqMhEe-c

You'd have to convert to vector, or tweak your model architecture to work with vector format.

This is really great. I am a big fan of Lottie files and a big fan of anything that makes them easier to work with.

Thank you! If you take Lottielab for a spin, let us know your feedback and feel free to report any issues, it will be really appreciated.

Very cool! And really clean design

PS Just noticed its missing a favicon btw at least for me

Your website is beautiful!

Thank you - we tried our best!

It's pretty wild that we still haven't reached parity with Macromedia Flash in the browser.

I mean, nearly 20 years ago I, a rube, was making professional animations in no time, and since then it got harder, and then less hard, but it's never been easier.

Hell, some (if not many) animation studios still use old Flash copies to make cartoons that are airing today.

This is super cool (and I'm a huge fan of Lottie), and I will probably check it out because I miss being able to make things easily but I can't help but feel sad that we're still making baby steps after a huge leap backwards.

(Don't get me wrong I understand why Flash died, but HTML5 did not remotely live up to the hype.)

While I agree I think that part of the reason is that requirements are so much more complex these days. No one had to make a Flash animation responsive to different phone sizes and orientations.

Flash animation was vector-based and inherently scaled to an incredible variety of resolutions.

Resolutions, yes. Proportions, no.

I don't think the added complexity is even remotely justified.

Let's face it: things that used to be easy have become unnecessarily complex.

PS - This project looks very cool!

Most video content today is 9:16 or 16:9 so… I’m not sure that matters.

Flash was a whole lot more than just video content back in the day. I have fond memories of applying wmode=transparent and having my Flash seamlessly fit into the rest of my page.

Yeah. Absolute ton of web interfaces in tech, to manage servers or VMs or storage arrays relied on flash interfaces. The transition off that was painful.

But that's not an insurmountable challenge, and Adobe can (has?) add functionality to their tooling to support it.

Yeah I was in school and wanted to try making games - but that was the exact year that "flash is dead - HTML5 is going to replace it"

And.... Yeah HTML gave us the canvas? No editor, no animations, no input.

The real innovations were with ES5/2015. It utterly destroyed the "mess around and make some basic games".

It's utterly laughable that "html5" was somehow the "alternative". We went from an editor that anyone can quickly create animations, games, etc to nothing - for over 10 years! And yeah to my knowledge we're _still_ not back to what we used to have.

See, it's not Flash per se, it's Macromedia / Adobe that never adapted the workflow to the modern web. And nowadays, even if they wouldn't want to target modern web as the output, they could put a runtime and compile it to WASM... just like Flash.

The iPad and co dropped Flash support, but Adobe was too slow to updat their own stuff, and the existing Flash community didn't pick up again. I mean there's Adobe Animate that if I'm reading this right is the same product, but the ecosystem died.

No, the capabilities were simply not there, nor where they portable. Sure, Adobe could have reinvented the entire platform, but it would likely have been a waste. And if it were so simple, someone else would have done it.

Adobe Animate is not the same product.

I agree with you. Flash got a whole generation of animators and developers into the craft. HTML5 is like three levels of abstraction down - everything is technically possible, but the tooling was not there even after this many years.

I would be interested to hear how Lottielab compares to Flash from your perspective.

Reply on news.ycombinator.com