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

21–30 of 115 posts

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

#21

Post by endofreach »

rimher wrote: post #14

https://rive.app is a free tool to create animations that integrates with a number of 'player libraries' (aka runtimes) that support most modern platforms. Rive focuses more on interactivity, rather than just playing back a small clip like Lottie is.

Wow, thank you for sharing this. I wonder, if you can‘t draw with pen & paper, how much sense does it even make to try creating illustrations like these & animate them? Any dev got experience who transitioned into that? I really like animations and 3D, got a good imagination but i can‘t even draw the simplest stuff…

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

#23

Post by jamespwilliams »

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

On mobile, there’s no padding between the text on this page and the borders of the screen, which makes it a bit hard to read

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

#24

Post by udbhavs »

endofreach wrote: post #21
rimher wrote: post #14

https://rive.app is a free tool to create animations that integrates with a number of 'player libraries' (aka runtimes) that support most modern platforms. Rive focuses more on interactivity, rather than just playing back a small clip like Lottie is.

Wow, thank you for sharing this. I wonder, if you can‘t draw with pen & paper, how much sense does it even make to try creating illustrations like these & animate them? Any dev got experience who transitioned into that? I really like animations and 3D, got a good imagination but i can‘t even draw the simplest stuff…

I felt the same way but recently I've been learning a bit of Inkscape and it's easier than it initially feels even with a mouse and keyboard. 2dgameartguru has some nice tutorials you can reference to get an idea for how the tools are used https://2dgameartguru.com/category-selection-inkscape/

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

#25

Post by tomduncalf »

I’ve used Lottie to render animations (used in place of images rather than as UI elements) on a couple of websites and was impressed how smoothly it worked and how easy it was to get up and running. I’ve no idea how complex it is to make the actual animations though!

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

#27

Post by sam_goody »

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?

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

#28

Post by endofreach »

udbhavs wrote: post #24
endofreach wrote: post #21

Earlier quoted context omitted.

Wow, thank you for sharing this. I wonder, if you can‘t draw with pen & paper, how much sense does it even make to try creating illustrations like these & animate them? Any dev got experience who transitioned into that? I really like animations and 3D, got a good imagination but i can‘t even draw the simplest stuff…

I felt the same way but recently I've been learning a bit of Inkscape and it's easier than it initially feels even with a mouse and keyboard. 2dgameartguru has some nice tutorials you can reference to get an idea for how the tools are used https://2dgameartguru.com/category-selection-inkscape/

Nice, that looks cool. Thank you!

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

#29

Post by nness »

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?

In my experience, we primarily use Lotte in UI animations where transparency is important for overlaying effects and elements.

I realise now you can bake in an alpha channel to some video formats, but both support and production of these files is cumbersome and Lotte is great from a workflow perspective -- particularly if you have dedicated 'motion designers' on your design team who are accustomed to After Effects already.

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

#30

Post by mkl »

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 whatever the scale, with the same file size. However, each additional picture element may cost more in comparison.

Some animations will be best in one, some in the other.

Post reply on HN