8 ms·

I do like the idea of having a common and open format for animations. That being said, I see quite a few web devs reaching for Lottie (which will add quite a fe

I do like the idea of having a common and open format for animations. That being said, I see quite a few web devs reaching for Lottie (which will add quite a few hundred kilobytes for the library/wrapper, and some extra ones for each animation), instead of learning more about CSS- and SVG-based animations (which would be a multitude smaller and more easily adjustable). In that sense, I also don’t like how they continuously boast about Lottie’s small size on the main website, while only comparing it to gif and png files (and not mentioning SVG/CSS animations). I’m sure it is a good fit for usage on native mobile apps, though.

throwanem 1y ago
Where it really excels IME is as a target format for design authoring tools, most notably After Effects, which is discussed above the fold in the linked article as the original motivation for the library and the file format. No one is writing stuff like that by hand to begin with. I've worked with Lottie animations as a mobile app dev, but never authored one.
- pavlov 1y ago
  It’s not trivial to produce a Lottie file in After Effects. 95% of the app’s features are off limits, so it’s practically impossible to take an existing AE project and convert it. Instead you have to ask an artist to author a project from scratch within Lottie’s limitations, but of course there’s no feedback within AE itself if you’re overstepping the boundaries, so they have to be particularly careful. I wouldn’t recommend it based on my personal experience. But I guess there are teams who have the diligence to make it work.
legulere 1y ago
Shouldn't it be possible to compile Lottie-animations down to SVG+JS? Is that maybe just something that's still missing?
- JusticeJuice 1y ago
  That’s exactly what the library does for its web renderer. There’s a svg renderer and a web renderer.
  - herrherrmann 1y ago
    The library does this in during runtime, though, if I’m not mistaken? The original commenter is probably referring to a build step that extracts the Lottie content and only leaves JS and SVG in the final output (which is not the case, as the Lottie web player library itself needs to be included as well, to render the animations and provide interactivity APIs during the rendering of the web page).
echelon 1y ago
> instead of learning more about CSS- and SVG-based animations Contrarian opinion: Flash was one of the best things about Web 1.0. The forced move to CSS and the constellation of other "standards" still hasn't caught up to what Flash once offered us. Flash was all at once a video format, animation format, programming environment, video player, interactive UI system, game programming engine, multiplayer MMO game dev engine, infographics system -- actually, it was literally everything you wanted it to be. And it was so simple that even kids could use it. If Adobe had opened everything - the format, the player, etc. - it could have become something tremendous that is still with us. I think there's space for this to be rethought and redone. We shouldn't be so dogmatic that CSS and SVG and HTML and Javascript are the only way. They've had nearly 40 years to shine and we're still struggling with the same issues. We should be trying to reinvent the wheel.
- bsimpson 1y ago
  Unfortunately doing that many things means the codebase must have been rather big. Big enough that auditing and removing licensed code (for instance, the video codecs) seems to be more than they had the stomach for. It really was a wonderful tool that is still unmatched for creative coding.
- Benanov 1y ago
  Flash was one of those things that tried to do too much, and some of its things started being at cross-purposes with each other. The video conflicted with its roots as a vector/animation studio, and that's why Apple famously didn't use it - it ended up being a battery hog. A lot of interests in web-based video wanted DRM, which meant it was never going to be usable by Free Software. It was trying to do too much and then the usual corporate mismanagement led to its demise.
  - rchaud 1y ago
    Apple famously didn't use it because it didn't sit inside their walled garden and they couldn't put any ads in it, take a cut of every sale, nor charge developers annually for the privilege of building on their property. That's 3 revenue sources that users and developers were skipping out on. Android phones had Flash support and it worked well enough. Was it desktop-level, of course not. But Android native apps themselves were a mess from a power consumption standpoint until they implemented a JIT compiler in v2.3 "Gingerbread" as well as a task manager that freed up RAM by closing inactive applications. I remember specifically choosing an ASUS android tablet over an iPad because I wanted to use the full web, open multiple tabs at a time and play Flash games, rather than deal with iOS' "one app open at a time" philosophy.
afavour 1y ago
Not to mention CSS animations (and the newer Web Animations API) allow hardware acceleration while libraries like this do not.
- panstromek 1y ago
  Lottie has canvas and svg renderer (that uses CSS transitions where possible, I believe), so technically it's also hardware accelerated (in most cases at least).
nine_k 1y ago
The point of Lottie is not simple animations like CSS transitions, but complex arbitrary animations, more like a cartoon than a minor piece of motion. A good example is the Telegram messenger that uses Lottie as the format of animated stickers, e.g. https://tlgrm.eu/stickers/Princess https://tlgrm.eu/stickers/Princess (click to animate).
- herrherrmann 1y ago
  Yes, and I think Lottie is very fitting for that use case! I was referring to reaching for Lottie even for simple small animations, because it seems easier to just drop the designer’s Lottie file into the project, rather than building the animation in a more native way. At least I’ve witnessed recommendations like this on Reddit.
  - throwanem 1y ago
    Oh, I think I see your meaning. Sure, for trivial translation and rotation, even scaling, I wouldn't expect or want to take a new dependency on the library. But if I already have Lottie in the bundle and a completed example of the animation in Lottie format, how much sense in the general case does it make to reimplement instead of using what I have? It will take pixel peeping and I would most likely do better to spend the same time on something a designer can't also do.
- hbn 1y ago
  Amazing how many of those are using it to animate unrealistic, exaggerated boob physics
interludead 1y ago
Yep, for web, unless you really need After Effects-level complexity, native web animation tools are still way more elegant and efficient
codedokode 1y ago
SVG/CSS needs a browser (SVG doesn't allow embedding fonts, can contains CSS/JS) and it is a flaw. SVG is designed only for embedding into websites. How do I display it in a native application.

throwanem 1y ago

Where it really excels IME is as a target format for design authoring tools, most notably After Effects, which is discussed above the fold in the linked article as the original motivation for the library and the file format. No one is writing stuff like that by hand to begin with. I've worked with Lottie animations as a mobile app dev, but never authored one.

pavlov 1y ago
It’s not trivial to produce a Lottie file in After Effects. 95% of the app’s features are off limits, so it’s practically impossible to take an existing AE project and convert it. Instead you have to ask an artist to author a project from scratch within Lottie’s limitations, but of course there’s no feedback within AE itself if you’re overstepping the boundaries, so they have to be particularly careful. I wouldn’t recommend it based on my personal experience. But I guess there are teams who have the diligence to make it work.

legulere 1y ago

Shouldn't it be possible to compile Lottie-animations down to SVG+JS? Is that maybe just something that's still missing?

JusticeJuice 1y ago
That’s exactly what the library does for its web renderer. There’s a svg renderer and a web renderer.
- herrherrmann 1y ago
  The library does this in during runtime, though, if I’m not mistaken? The original commenter is probably referring to a build step that extracts the Lottie content and only leaves JS and SVG in the final output (which is not the case, as the Lottie web player library itself needs to be included as well, to render the animations and provide interactivity APIs during the rendering of the web page).

echelon 1y ago

> instead of learning more about CSS- and SVG-based animations Contrarian opinion: Flash was one of the best things about Web 1.0. The forced move to CSS and the constellation of other "standards" still hasn't caught up to what Flash once offered us. Flash was all at once a video format, animation format, programming environment, video player, interactive UI system, game programming engine, multiplayer MMO game dev engine, infographics system -- actually, it was literally everything you wanted it to be. And it was so simple that even kids could use it. If Adobe had opened everything - the format, the player, etc. - it could have become something tremendous that is still with us. I think there's space for this to be rethought and redone. We shouldn't be so dogmatic that CSS and SVG and HTML and Javascript are the only way. They've had nearly 40 years to shine and we're still struggling with the same issues. We should be trying to reinvent the wheel.

bsimpson 1y ago
Unfortunately doing that many things means the codebase must have been rather big. Big enough that auditing and removing licensed code (for instance, the video codecs) seems to be more than they had the stomach for. It really was a wonderful tool that is still unmatched for creative coding.
Benanov 1y ago
Flash was one of those things that tried to do too much, and some of its things started being at cross-purposes with each other. The video conflicted with its roots as a vector/animation studio, and that's why Apple famously didn't use it - it ended up being a battery hog. A lot of interests in web-based video wanted DRM, which meant it was never going to be usable by Free Software. It was trying to do too much and then the usual corporate mismanagement led to its demise.
- rchaud 1y ago
  Apple famously didn't use it because it didn't sit inside their walled garden and they couldn't put any ads in it, take a cut of every sale, nor charge developers annually for the privilege of building on their property. That's 3 revenue sources that users and developers were skipping out on. Android phones had Flash support and it worked well enough. Was it desktop-level, of course not. But Android native apps themselves were a mess from a power consumption standpoint until they implemented a JIT compiler in v2.3 "Gingerbread" as well as a task manager that freed up RAM by closing inactive applications. I remember specifically choosing an ASUS android tablet over an iPad because I wanted to use the full web, open multiple tabs at a time and play Flash games, rather than deal with iOS' "one app open at a time" philosophy.

afavour 1y ago

Not to mention CSS animations (and the newer Web Animations API) allow hardware acceleration while libraries like this do not.

panstromek 1y ago
Lottie has canvas and svg renderer (that uses CSS transitions where possible, I believe), so technically it's also hardware accelerated (in most cases at least).

nine_k 1y ago

The point of Lottie is not simple animations like CSS transitions, but complex arbitrary animations, more like a cartoon than a minor piece of motion. A good example is the Telegram messenger that uses Lottie as the format of animated stickers, e.g. https://tlgrm.eu/stickers/Princess https://tlgrm.eu/stickers/Princess (click to animate).

herrherrmann 1y ago
Yes, and I think Lottie is very fitting for that use case! I was referring to reaching for Lottie even for simple small animations, because it seems easier to just drop the designer’s Lottie file into the project, rather than building the animation in a more native way. At least I’ve witnessed recommendations like this on Reddit.
- throwanem 1y ago
  Oh, I think I see your meaning. Sure, for trivial translation and rotation, even scaling, I wouldn't expect or want to take a new dependency on the library. But if I already have Lottie in the bundle and a completed example of the animation in Lottie format, how much sense in the general case does it make to reimplement instead of using what I have? It will take pixel peeping and I would most likely do better to spend the same time on something a designer can't also do.
hbn 1y ago
Amazing how many of those are using it to animate unrealistic, exaggerated boob physics

interludead 1y ago

Yep, for web, unless you really need After Effects-level complexity, native web animation tools are still way more elegant and efficient

codedokode 1y ago

SVG/CSS needs a browser (SVG doesn't allow embedding fonts, can contains CSS/JS) and it is a flaw. SVG is designed only for embedding into websites. How do I display it in a native application.