Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Lottie – Use after effects animations in web and native apps

airbnb.io

Post reply on HN
Print view View original

41–50 of 115 posts

Re: Lottie – Use after effects animations in web and native apps

#41

Post by josefrichter »

Larrikin wrote: post #6

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.

AE is not difficult, many designers know it (especially those who worked with Flash). The problem is that AE let’s you easily create stuff that is completely detached from technological reality and impossible to implement.

Re: Lottie – Use after effects animations in web and native apps

#42

Post by Zababa »

Eric_WVGG wrote: post #4

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. https://theworkingassembly.com/labs

The scrolling experience is a bit frustrating, but the animation is beautiful!

Re: Lottie – Use after effects animations in web and native apps

#43

Post by josefrichter »

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.

Re: Lottie – Use after effects animations in web and native apps

#44

Post by k__ »

josefrichter wrote: post #43

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.

Again, mindset beat technology.

ActionScript and Flex were more powerful than JavaScript and HTML, still the latter won because it was open.

Re: Lottie – Use after effects animations in web and native apps

#45

Post by nfRfqX5n »

danfritz wrote: post #34

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

lazy load it

Re: Lottie – Use after effects animations in web and native apps

#46

Post by circlingthesun »

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.

[1] https://www.npmjs.com/package/bodymovin-to-smil [2] https://bundlephobia.com/package/lottie-web@5.8.1 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=482689 [4] https://caniuse.com/svg-smil [5] https://bookem.com

Re: Lottie – Use after effects animations in web and native apps

#47

Post by ehnto »

nfRfqX5n wrote: post #45
danfritz wrote: post #34

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

lazy load it

I have found that doesn't cut it anymore, at least for above the fold content. I think lighthouse waits until your CPU use drops and that is considered the end of the page processing. But it changes so fast I could already be wrong again.

Re: Lottie – Use after effects animations in web and native apps

#48

Post by Zababa »

mkl wrote: post #30
sam_goody wrote: post #27

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 what…

So Lottie would be the video equivalent of the SVG format, in a way? That sounds like something that should/will be supported natively at some point.

Re: Lottie – Use after effects animations in web and native apps

#49

Post by 8toast »

udbhavs wrote: post #2

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: https://www.haikuanimator.com/ https://glaxnimate.mattbas.org/

Cavalry can export Lottie files: https://cavalry.scenegroup.co/

Re: Lottie – Use after effects animations in web and native apps

#50

Post by elondaits »

k__ wrote: post #44
josefrichter wrote: post #43

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.

Again, mindset beat technology. ActionScript and Flex were more powerful than JavaScript and HTML, still the latter won because it was open.

Not just open. The standard underlying model in Flash is a stage with fixed dimensions. Great for arcade games and animations, but bad for responsive or being readable in various screen sizes. HTML can be a pain when you want to create sophisticated UI layouts, but by default it’s readable on all screens and reflows content automatically.
Post reply on HN