Lottie – Use after effects animations in web and native apps • Hacker News Board

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

#81

Post by hahamrfunnyguy » Tue, Dec 21, 2021, 3:56 PM UTC

This looks pretty cool but right now I don't have any animation software.

To fill that need I've been using svgator (https://www.svgator.com/) to create some simple animations. It can SVG files with embedded animations and no JavaScript.

I have haven't gotten too deep into it, but as someone who has done quite a bit of work in Flash, Adobe Premiere, and Final Cut Pro; it seems to be a pretty full-featured animation software. I didn't have to read any documentation and got my animations finished quickly.

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

#82

Post by halpert » Tue, Dec 21, 2021, 3:58 PM UTC

rikkipitt wrote: post #12

We used Lottie in the logo of the new Stephen Hawking site. https://www.hawking.org.uk

Took around 7 seconds to load for me on an iPhone 11.

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

#83

Post by pier25 » Tue, Dec 21, 2021, 4:04 PM UTC

Ugh the player adds 66kB gzip to your project.

https://bundlephobia.com/package/lottie-web@5.8.1

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

#84

Post by whywhywhywhy » Tue, Dec 21, 2021, 4:12 PM UTC

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.

By the time Adobe bought it they didn’t really care that much about the animation and app side of Flash. Seemed to mostly care about it being the video delivery mechanism for the web.

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

#85

Post by yagudaev » Tue, Dec 21, 2021, 4:12 PM UTC

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.

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

#86

Post by whywhywhywhy » Tue, Dec 21, 2021, 4:14 PM UTC

lekevicius wrote: post #71

martin_ky wrote: post #61

Earlier quoted context omitted.

I’m only familiar with Flash as a user, not as developer. I’m curious, what did Flash have, that you can’t readily do with JS and Canvas? Be as broad or specific as you like.

For me it was a combination of IDE that allowed very easily to merge different assets (text, vector graphics, sounds) with basic scripting and a timeline. Now you kind of have to think in code, and architect the site as a whole, there's less creative impulse, or simply messing around to find something cool. This interactive messing around has to be visual, ideas should be easily copy-pastable, etc. Because it was eas…

Think there’s positives and negatives. Some of the stuff possible with canvas is amazing and wouldn’t have even been possible at all in flash really and it does integrate as a first class citizen on the page, doesn’t feel janky like flash did sometimes.

But on the other hand a 12 year old can’t figure it out in a week and ship an animation they made from scratch to the web.

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

#87

Post by ampersandy » Tue, Dec 21, 2021, 4:28 PM UTC

lekevicius wrote: post #70

circlingthesun wrote: post #46

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…

I love SMIL. Have been using it to craft custom SVG loaders for almost every brand I've worked with. Loader is usually much smaller than a gif, vector, animated 60 FPS, etc. So good.

Do you have any resources on how you learned to create such loaders? I hacked together a custom loading animation for some tools I've built just using images & css transforms, but would love to learn to make things even slicker.

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

#88

Post by josefrichter » Tue, Dec 21, 2021, 4:42 PM UTC

root_axis wrote: post #80

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.

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.

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

#89

Post by 11235813213455 » Tue, Dec 21, 2021, 4:43 PM UTC

We converted our lottie animations to mp4 because the JS file + JSON files are too big, and can't be streamed (they're blocking), they hurt SEO

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

#90

Post by rchaud » Tue, Dec 21, 2021, 4:45 PM UTC

martin_ky wrote: post #61

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.

I’m only familiar with Flash as a user, not as developer. I’m curious, what did Flash have, that you can’t readily do with JS and Canvas? Be as broad or specific as you like.

The Flash interface is primarily visual. It looks more like a video editing app, with timelines and layers.

- Click button X, run Timeline 1. - Click Button Y, run Timeline 2. - Click X again, run Timeline 1 in reverse.

That made it far more intuitive for designers, who can prototype interaction design ideas themselves, instead of leaving it entirely to developers to implement.

The death of Flash led to the death of the creative web, because anything outside of the bounds of CMS templated content required developers to do everything from CSS, JS triggers and deployment. Even today, that workflow persists, but is worse, because creative works can't be bundled into a single executable file like what was possible w/ Flash . Designers now create something in After Effects, which then has to be compiled into code via Lottie, and implemented by a developer.