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

91–100 of 115 posts

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

#91

Post by pcmaffey »

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'll have to try out the bodymovin-SMIL plugin. I've long looked for a tool to generate SMIL animations, but I always end up just writing them by hand [1], which gives me much greater control... I've even wondered from time to time about building an SVG animation studio myself, as admittedly, designing and animating in code is not for everyone.

[1] https://www.pcmaffey.com

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

#92

Post by fassssst »

The Start button in Windows 11 uses Lottie, along with the various other new animated icons. WinUI has an AnimatedIcon control that makes them easy to integrate:

https://docs.microsoft.com/en-us/windows/apps/design/control...

Disclosure: I work at Microsoft.

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

#93

Post by josefrichter »

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.

You could “draw” the whole website, create fairly complex animations and interactions, script everything, and then just publish it.

Now imagine what it means today to create a simple animation, export it to Lottie, incorporate that into a website and publish that. It’s a nightmare. And it’s nowhere near to what was possible with Flash.

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

#94

Post by Eric_WVGG »

Zababa wrote: post #42
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!

Yeah I told them users hate that. ¯\_(ツ)_/¯

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

#95

Post by ahuth »

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…

Good point about lazily fetching some animations can be a good idea.

Not sure that all, most, or even many JS folks are addicted to bundling everything into one file.

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

#96

Post by silverlyra »

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.

Shameless plug: I'm an engineer at Fable, a browser-based motion graphics editor. We're working to make creating animations more accessible, exactly like the heyday of Flash (but without any binary plugins). And we support exporting to Lottie.

https://fable.app

And of course, if you're an engineer and this appeals to you, get in touch! Email in my profile. I love working on software that facilitates creativity.

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

#97

Post by VWWHFSfQ »

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…

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.

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

#98

Post by yaomtc »

silverlyra wrote: post #96
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.

Shameless plug: I'm an engineer at Fable, a browser-based motion graphics editor. We're working to make creating animations more accessible, exactly like the heyday of Flash (but without any binary plugins). And we support exporting to Lottie. https://fable.app And of course, if you're an engineer and this appeals to you, get in touch! Email in my profile. I love working on software that facilitates creativity.

Thanks for building for the browser, so Linux users like me can use it easily. While native code has its advantages, web apps are getting closer and can be easier to build.

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

#99

Post by anchpop »

pcmaffey wrote: post #91
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'll have to try out the bodymovin-SMIL plugin. I've long looked for a tool to generate SMIL animations, but I always end up just writing them by hand [1], which gives me much greater control... I've even wondered from time to time about building an SVG animation studio myself, as admittedly, designing and animating in code is not for everyone. [1] https://www.pcmaffey.com

I saw your site yesterday and forgot to comment on it then - I wanted to say thanks for the great articles and interesting animations.

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

#100

Post by robertoandred »

monkeynotes wrote: post #67
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.

I'd say the major advantage was you had an IDE that had a canvas to draw on, a visual timeline to aide your animation, tweening, powerful scripting - much like Swift, and compilation (ship a self contained SWF binary). For me the canvas was powerful, I could use a wacom to draw, tween motion between frames and visualize the whole thing quickly with playhead scrubbing, and keyframe tweaking etc. I don't miss Flash but…

The Flash IDE still exists, it's called Adobe Animate now.
Post reply on HN