Lottie is an animation library that renders Adobe After Effects animations on Web, Android and iOS: http://bit.ly/lottieweb With adaptive loading, fast connections can get a Lottie animation and slow ones can get a static image: http://glitch.com/~lottie-web pic.twitter.com/CEEbew5KGT
-
Network-aware animations with LottieLottie is a library for Web, and iOS that parses Adobe After Effects animations exported as JSON.
-
Replying to @addyosmani
lottie-web runtime is huge, and comes with the conversion cost from lottie json to DOM. https://github.com/airbnb/lottie-web/issues/1184 … Lottie is great DX, but if folks focus on user problems and not developer problems I suspect a CSS animation, SVG, or SMIL probably has better value to cost math.
2 replies 1 retweet 3 likes -
Replying to @ElliottZ
Yeah, there really needs to be a "Preact" for lottie-web given the runtime costs. I could see the argument for using it on desktop. Per the fallback for slow networks think SVG or an alternative is a better fit for constrained devices.
1 reply 0 retweets 5 likes -
Replying to @addyosmani @ElliottZ
There is technically a "light" version, but IIRC it's 45kb instead of 65kb gzipped, and that doesn't address the JSON bit.
2 replies 0 retweets 4 likes -
/cc
@flackrw2 replies 0 retweets 0 likes -
Replying to @slightlylate @_developit and
My question is basically "is it worth it", even on desktop. ex. You want a spinning star when a user favorites something. An SVG with a CSS anim to make it spin (or using web anim API) is small and probably gets you the same business metric impact as Lottie+slightly fancier anim
3 replies 0 retweets 1 like
Lottie is in the set of *wildly* inappropriate tools for mobile until/unless we can get it off the main thead (see also: GASP, React Motion, React Spring, etc.), but thankfully @flackrw has a plan re: Lottie
-
-
Replying to @slightlylate @ElliottZ and
Getting it off the main thread resolves one of the major issues, but I expect we'll also need smaller libraries.
0 replies 0 retweets 0 likesThanks. Twitter will use this to make your timeline better. UndoUndo
-
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
& Web Standards TL; Blink API OWNER
Named PWAs w/
DMs open. Tweets my own; press@google.com for official comms.