7 ms·

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

154 points by thegeomaster 3y ago

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!

jay-barronville 3y ago
Your website is beautiful!
- thegeomaster 3y ago
  Thank you - we tried our best!
pedalpete 3y ago
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.
- thegeomaster 3y ago
  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 https://discord.gg/3r9GcBUAZa) or by emailing hello@lottielab.com. We respond and act quickly.
- idlewan 3y ago
  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).
pers0n 3y ago
https://rive.app/ https://rive.app/ Rive has better performance than Lottie, I’m not affiliated in anyway
- alistairthomson 3y ago
  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.
  - neurowave 3y ago
    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 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=_EDvSszs2N0UU2cO0oeOBw https://x.com/guidorosso/status/1603189817382010882?s=46&t=_...
- sergioisidoro 3y ago
  I really like rive, but they don't support react native with expo, which is becoming super common in the space.
jaxomlotus 3y ago
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!
- bsimpson 3y ago
  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."
  - promiseofbeans 3y ago
    Although, sadly, figma is about to be owned by adobe.
    - bsimpson 3y ago
      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.
- thegeomaster 3y ago
  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 https://discord.gg/3r9GcBUAZa.
- chamakits 3y ago
  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.
d0100 3y ago
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
bsimpson 3y ago
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.
- avree 3y ago
  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-of-lottie-open-source-community-9e50e66ebb04 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.
  - motoxpro 3y ago
    Agree wholeheartedly. I am glad we are finally getting away from highlighting founders so much.
- thegeomaster 3y ago
  Does this answer your question? https://www.crunchbase.com/organization/lottielab https://www.crunchbase.com/organization/lottielab
kitanata 3y ago
[flagged]
xyzzy_plugh 3y ago
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.)
- afavour 3y ago
  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.
  - doctorpangloss 3y ago
    Most video content today is 9:16 or 16:9 so… I’m not sure that matters.
    - afavour 3y ago
      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.
      - depereo 3y ago
        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.
  - freeone3000 3y ago
    Flash animation was vector-based and inherently scaled to an incredible variety of resolutions.
no_butterscotch 3y ago
Neat! Can you make the examples open in the editor?
- thegeomaster 3y ago
  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.
h0l0cube 3y ago
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.
- arcanemachiner 3y ago
  Synfig?
  - h0l0cube 3y ago
    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
throw14082020 3y ago
Oh, how is this different to https://rive.app/ https://rive.app/ ?
- neurowave 3y ago
  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-interactive-era 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 https://rive.app/blog/rive-as-a-lottie-alternative
rickette 3y ago
This looks great, definitely gonna try it out. One tip: add social login buttons (login with Google/GitHub), eases the sign up proces.
- thegeomaster 3y ago
  Thanks! Yes, a sibling comment has mentioned this too, agree it's worthwhile.
Major_Grooves 3y ago
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.
- thegeomaster 3y ago
  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.
zachrip 3y ago
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.
- thegeomaster 3y ago
  Really strange. Are you perhaps on Linux?
  - zachrip 3y ago
    Sorry, should've included: windows 11/rtx 4090 (drivers are up to date, browsers are up to date)
    - thegeomaster 3y ago
      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 https://www.lottielab.com/sign-up or https://www.lottielab.com/login https://www.lottielab.com/login, if you want to try the editor.
tomasreimers 3y ago
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!
ian0 3y ago
Very cool! And really clean design PS Just noticed its missing a favicon btw at least for me
pxue 3y ago
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?
- gochi 3y ago
  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.
  - BHSPitMonkey 3y ago
    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.
- synapticpaint 3y ago
  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://www.youtube.com/watch?v=CgKNTAjQpkk https://youtu.be/X0AhqMhEe-c https://youtu.be/X0AhqMhEe-c You'd have to convert to vector, or tweak your model architecture to work with vector format.
- thegeomaster 3y ago
  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.

154 points by thegeomaster 3y ago

jay-barronville 3y ago

Your website is beautiful!

thegeomaster 3y ago
Thank you - we tried our best!

pedalpete 3y ago

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.

thegeomaster 3y ago
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 https://discord.gg/3r9GcBUAZa) or by emailing hello@lottielab.com. We respond and act quickly.
idlewan 3y ago
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).

pers0n 3y ago

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

alistairthomson 3y ago
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.
- neurowave 3y ago
  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 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=_EDvSszs2N0UU2cO0oeOBw https://x.com/guidorosso/status/1603189817382010882?s=46&t=_...
sergioisidoro 3y ago
I really like rive, but they don't support react native with expo, which is becoming super common in the space.

jaxomlotus 3y ago

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!

bsimpson 3y ago
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."
- promiseofbeans 3y ago
  Although, sadly, figma is about to be owned by adobe.
  - bsimpson 3y ago
    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.
thegeomaster 3y ago
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 https://discord.gg/3r9GcBUAZa.
chamakits 3y ago
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.

d0100 3y ago

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

bsimpson 3y ago

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.

avree 3y ago
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-of-lottie-open-source-community-9e50e66ebb04 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.
- motoxpro 3y ago
  Agree wholeheartedly. I am glad we are finally getting away from highlighting founders so much.
thegeomaster 3y ago
Does this answer your question? https://www.crunchbase.com/organization/lottielab https://www.crunchbase.com/organization/lottielab

kitanata 3y ago

[flagged]

xyzzy_plugh 3y ago

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

afavour 3y ago
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.
- doctorpangloss 3y ago
  Most video content today is 9:16 or 16:9 so… I’m not sure that matters.
  - afavour 3y ago
    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.
    - depereo 3y ago
      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.
- freeone3000 3y ago
  Flash animation was vector-based and inherently scaled to an incredible variety of resolutions.

no_butterscotch 3y ago

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

thegeomaster 3y ago
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.

h0l0cube 3y ago

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.

arcanemachiner 3y ago
Synfig?
- h0l0cube 3y ago
  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

throw14082020 3y ago

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

neurowave 3y ago
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-interactive-era 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 https://rive.app/blog/rive-as-a-lottie-alternative

rickette 3y ago

This looks great, definitely gonna try it out. One tip: add social login buttons (login with Google/GitHub), eases the sign up proces.

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

Major_Grooves 3y ago

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.

thegeomaster 3y ago
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.

zachrip 3y ago

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.

thegeomaster 3y ago
Really strange. Are you perhaps on Linux?
- zachrip 3y ago
  Sorry, should've included: windows 11/rtx 4090 (drivers are up to date, browsers are up to date)
  - thegeomaster 3y ago
    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 https://www.lottielab.com/sign-up or https://www.lottielab.com/login https://www.lottielab.com/login, if you want to try the editor.

tomasreimers 3y ago

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!

ian0 3y ago

Very cool! And really clean design PS Just noticed its missing a favicon btw at least for me

pxue 3y ago

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?

gochi 3y ago
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.
- BHSPitMonkey 3y ago
  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.
synapticpaint 3y ago
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://www.youtube.com/watch?v=CgKNTAjQpkk https://youtu.be/X0AhqMhEe-c https://youtu.be/X0AhqMhEe-c You'd have to convert to vector, or tweak your model architecture to work with vector format.
thegeomaster 3y ago
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.