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

101–110 of 115 posts

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

#101

Post by CharlesW »

VWWHFSfQ wrote: post #97
root_axis wrote: post #80

Earlier quoted context omitted.

Flash did not integrate well with the rest of the page and was an utter nightmare with respect to accessibility and responsive design. It was also buggy, prone to memory leaks and crashing, and required the end-user to install or update arbitrary code on their machine, with all the headache and security implications that necessitates. Support and performance was also horrible on mobile when it was available at all. F…

Yes everyone is aware of the problems with flash. The point was that nothing today compares with how nice the development tools and experience were for it.

> The point was that nothing today compares with how nice the development tools and experience were for it.

You'll be happy to learn that Adobe Animate is the Flash Professional (née Macromedia Flash, née FutureSplash Animator) development tool/experience: https://www.adobe.com/products/animate.html

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

#102

Post by CharlesW »

josefrichter wrote: post #88
root_axis wrote: post #80

Earlier quoted context omitted.

Flash did not integrate well with the rest of the page and was an utter nightmare with respect to accessibility and responsive design. It was also buggy, prone to memory leaks and crashing, and required the end-user to install or update arbitrary code on their machine, with all the headache and security implications that necessitates. Support and performance was also horrible on mobile when it was available at all. F…

Those are exactly the problems that Adobe was supposed to solve. And it’s not like it was mission impossible. I’d say everything we have today still sucks compared to Flash. Building a website with the level of interactivity, micro interactions and animations using today’s technology is super complicated and almost impossible for a single person.

> [Web integration, accessibility, and responsive design] are exactly the problems that Adobe was supposed to solve. And it’s not like it was mission impossible.

"Solve" is weird in this context, but Adobe did make good progress in each of these areas, first by supporting some of them in Flash Player, and ultimately by abandoning the proprietary runtime.

> Building a website with the level of interactivity, micro interactions and animations using today’s technology is super complicated and almost impossible for a single person.

Flash was never for this (other than in a "if all you've got is a hammer, everything looks like a nail" sense), but if that's your benchmark then you can still do that with Adobe Animate.

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

#103

Post by gresrun »

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/

Skottie: Lottie player using the Skia graphics library[0][1]

Skia powers Google Chrome[2], Flutter, & Fuchia[3].

[0]: https://skia.org/docs/user/modules/skottie/ [1]: https://skottie.skia.org/ [2]: https://skia.org/ [3]: https://skia.org/docs/dev/flutter/

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

#104

Post by kingcharles »

yagudaev wrote: post #85

It is pretty great . I used it on a RN project a few months ago. There is an amazing collection of animations to choose from here: https://lottiefiles.com/ . You can also buy after effects templates on many websites and use them for motion graphics.

Cool resource, thank you.

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

#105

Post by antoniuschan99 »

simion314 wrote: post #78
throwanem wrote: post #65

Earlier quoted context omitted.

They don't solve the same problem. ExtJS is a UI toolkit, AngularJS is more of an application framework - Angular doesn't provide complex controls, Ext doesn't provide a defined structure in which to build your code.

>Angular doesn't provide complex controls, It did not provide simple controls either, no basic DropDown or DataGrid,ListBox. It only made super easy to make Hellpo world apps with the 2-way data bindings and that is all, when things get complex angular can't also gets super complex.

Yes ExtJS could be thought of as a component/ui framework similar to Bootstrap or KendoUI?

Before Angular, Backbone was all the rage (2013) which started the whole front end framework trend and effectively killed jQuery (which was only really good for manipulating the DOM because JavaScript was so fragmented since not every browser supported the JS function... eg. IE6).

Essentially Angular wrapped everything into a nice gift that included Backbone-like MVC type architecture (MVVM), KnockoutJS, and Mustache for Templates (Similar to ERB for Rails?).

I'm definitely incorrect in the descriptions in the plumbing because it feels like ancient history now. Essentially Angular is just a framework like Rails for the Front End. Difference between ExtJS is that it's more heavily into the way the UI widgets worked and behaved whereas Angular is more for the Business Logic and the way the Client Side is structured.

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

#106

Post by jawishhameed »

CharlesW wrote: post #101
VWWHFSfQ wrote: post #97

Earlier quoted context omitted.

Yes everyone is aware of the problems with flash. The point was that nothing today compares with how nice the development tools and experience were for it.

> The point was that nothing today compares with how nice the development tools and experience were for it. You'll be happy to learn that Adobe Animate is the Flash Professional (née Macromedia Flash, née FutureSplash Animator) development tool/experience: https://www.adobe.com/products/animate.html

We released a Lottie exporter plugin for Adobe Animate (currently available as an alpha release) so that all the skill and experience people had gained with Flash/Animate can be used to create Lottie animations!

https://lottiefiles.com/plugins/animate

Disclosure: I work at LottieFiles.

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

#107

Post by jawishhameed »

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/

We have a plugin for Adobe Animate (formerly Adobe Flash Professional) that exports to Lottie, similar to the plugin for After Effects. It's pretty rough at the moment though with many Animate features not supported.

https://lottiefiles.com/plugins/animate

PS: I work for LottieFiles and built the plugin.

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

#108

Post by jawishhameed »

julik wrote: post #39

Beware that there is some impact with both generating large Lottie files and especially with bundling. It is all too easy - if you are webpacking all of your assets together - to suddenly have 1kb of useful code and 200+ kb of animations. I've seen it happen also that Lottie animations got fed into Babel inside of the Webpack pipeline leading to the node process quitting due to lack of memory. Might partly have to do…

That's a real pro-tip! Lottie animation JSONs are better left out of the bundling and loaded dynamically.

We built dotLottie[1], a little superset encapsulation layer ontop of Lottie as an experiment/solution to make it easer to bundle multiple Lotties and any associated assets AND make distribution/CDN use simpler. There are several sites that are using it now with good success.

1. https://dotlottie.io/

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

#109

Post by jawishhameed »

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

For the vast majority of use cases, you could try using the jlottie player (15kb gzipped) instead of lottie-web. jlottie was built to support a limited set of Lottie features, based on the data we have, to support 80+% of the Lottie animations we typically see.

https://github.com/LottieFiles/jlottie

Post reply on HN