13 ms·
Lottie 4.0 for iOS: new render engine with significant performance improvements
- super256 4y agoCan anyone recommend a course or tutorial series on creating simple 2d bodymovin animations in after effects? I always wanted to use lottie, but never really dived into 2d animations. Edit: To make it clear: I'm a complete afterfx noob.
- another_kel 4y agoIf you want a course and are willing to pay for it I can recommend School of Motion — https://www.schoolofmotion.com/courses/after-effects-kickstart https://www.schoolofmotion.com/courses/after-effects-kicksta... (did not take this one, I took more advanced stuff and it was good). Or just like in SE a good way to learn is to choose what you want to make and then watch tutorials on youtube about that specific topic. > I always wanted to use lottie, but never really dived into 2d animations. However, as a person who worked as a motion designer for several years, I must say that creating good animations, especially for lotties limited toolset is not a technical problem, but an artistic one. Making animation feel good is hard and takes a lot of practice. Even more for character animation.
- klabb3 4y agoHijacking thread. Are there any alternatives to AE for those of us that want to animate and export to Lottie but also suffer physical repulsion to Adobe? Is there any serious competition? Lightweight and FOSS are on the wishlist..
- aceazzameen 4y agoSearching around and I also found this: https://www.fable.app/ https://www.fable.app/
- calstephens98 4y agoHah I have the same question! I've been working on Lottie for over a year, but I've never used After Effects before and don't have it installed. My life would sure be a bit easier if there was a nice lightweight tool for creating and modifying Lottie animations. One useful tool is the lottiefiles.com editor, but its really barebones and only lets you modify colors of layers in existing animations.
- aceazzameen 4y agoIt's been a while since I've played with it, but there's also Expressive Animator. I think it used to be FOSS, but isn't anymore. It looks like it has a monthly subscription for Pro now (Lottie exports). About the same price as Adobe, which is a shame. https://www.expressivesuite.com/expressive-animator/ https://www.expressivesuite.com/expressive-animator/
- boriscal 4y agoI've been on the waitlist for a while now, but this might be what you're looking for: https://lottielab.com https://lottielab.com
- another_kel 4y agoSerious competition is the opposite of lightweight and FOSS to be fair. The most powerful AE competitor(in 2d animation) I've seen is Cavalry. It targets professional motion designers, has neat procedural animation toolset and can export to lottie. https://cavalry.scenegroup.co/ https://cavalry.scenegroup.co/
- twobitshifter 4y agoCrazy to me that animations would have been done on the main thread but that showed how far you can get with kiss. The performance improvement they’re showing is great -17% CPU to display a loading animation down to 0. Before the animation could be interfering with the loading!
- CamelRocketFish 4y agoAre you on iOS Developer? Anything related to UI is always suggested to be done on the main thread by Apple.
- jshier 4y agoSuggested? It's required, otherwise behavior is undefined for many APIs. And with the main thread checker you now also get runtime issues when you access such APIs. It's more shocking to me that Apple hasn't explicitly shifted at least some of its UI frameworks off the main queue in the last 15 years, especially as they've added tools to make it easier. Of course, given the bugs with the parts that are off the main queue, especially in SwiftUI, perhaps that's a good thing.
- kridsdale1 4y agoComponentKit for Facebook was explicitly built to offload as much ui work as possible to other threads (text sizing being super expensive) and only go back to main to say “here is your new react style model”. I was very surprised that SwiftUI didn’t do this too.
- yamtaddle 4y agoIn fact, it's everything else they encourage you to do off the main thread. Though I expect things like complex animations are exactly sort of thing that ought to be considered an exception to that guideline. Especially ones that have limited or no interactivity, as in these examples.
- twobitshifter 4y agoI’m not, I guess the difference is animation vs UI? From the article, the ios library is set up to run animations off thread on a render server. >On iOS, the most performant and power-efficient way to play animations is by using Core Animation. *This system framework renders animations out-of-process with GPU hardware acceleration.* Animation playback is managed by a separate system process called the “render server”. This means Core Animation-powered animations don’t contribute to the CPU utilization of the app process itself, and can continue even when its main thread is blocked or busy.
- amelius 4y agoWhat is that header image of a beach about? Is that a rendering?
- tomxor 4y agoThat's there to ensure you know how cool and hip they are. Not only did they just release a thing, that does stuff, and is progress. But they did it over the weekend between surf without breaking a sweat because they are pro. /s
- faizmokhtar 4y agoMy guess is that it's for og meta tags so that the post link renders nicely on social media.
- bfgoodrich 4y ago
- deleted 4y ago[deleted]
- skilled 4y agoI suppose Rive [0] will have to make a response to this to clarify just how much better it is than Lottie - as far as performance goes. [0]: https://rive.app/ https://rive.app/
- projektfu 4y agohttps://rive.app/use-cases https://rive.app/use-cases Thanks, I hate it.
- satvikpendem 4y agoI like it. Obviously don't use it for everything but small UX touches here and there make a brand more likeable to users, in my experience doing frontend and design interviews.
- zahrc 4y agoCall me old, but I don’t like it all. This seems over the top
- nvrspyx 4y agoI also think it's over the top and I'm a year or two shy of being a zoomer. Although, I guess being a millennial is considered old by many now. I just wish developers would make mobile UIs consistent with the OS. The Apollo Reddit client and, surprisingly, the official GitHub app are the only third-party apps that I have that feel/look like "native" iOS apps. When it's not over-the-top animations, giant UI elements, tutorial modals, or fullscreen pop-ups, it's small details like the (IMO ugly) custom font and the sharp-cornered buttons in the Dropbox app. At least for that particular app, I can just use the built-in Files app, but no such luck for other apps.
- saagarjha 4y agoUI is more than how things look, it’s also about how they work. Both of those apps do bad things in the pursuit of trying to be consistent with OS UI they don’t understand.
- gfxgirl 4y ago> These issues are inherent limitations of using a main-thread-bound rendering architecture. sorry but bullshit! Sure, multi-threaded rendering can give faster results but the apps AirBnB is making could have easily rendered at 60hz with single threaded software rendering in flash in 1998! I can only guess that too much abstraction throughout the systems has turned into death by 1000 cuts and their solution, instead of getting rid of the 1000 cuts is to apply more band-aids
- JamesSwift 4y agoLottie is an industry standard cross-platform animations pipeline, its not limited to "apps AirBnB is making".
- gfxgirl 4y agoIrrelevant, the apps it's being used for would run fine on a 25yr old machine at 60fps. You shouldn't need multi-threading to render a few thousand objects and most UI apps of the type Lottie is being used for animate 100 or less at a time. Note: It's good that Lottie runs faster for its users. My point is only that the entire stack is over engineered and the solutions being used are because the stack is bloated and inefficient
- plorkyeran 4y agoI agree with the general point you're making, but a 1997 computer would not be able to render even just a basic loading spinner at 1170x2532 at 60 FPS. Software rendering would be impossible even with an infinitely fast CPU as it would exceed the bandwidth limit of AGP 1.0, which itself only came out that year. The graphics hardware at the time simply did not support that resolution at any speed.
- mike_hearn 4y agoThis is a common problem when people complain about graphics performance and compare to older hardware - we forget how much higher modern screen resolutions are. It's not a smoothly scaling problem either. As often with scaling, you hit problems at particular levels that require a totally new solution to the problem. CPU speeds stagnated whilst screen technologies didn't, hence, complexity.
- dang 4y agoRelated: Lottie – Use after effects animations in web and native apps - https://news.ycombinator.com/item?id=29634114 https://news.ycombinator.com/item?id=29634114 - Dec 2021 (111 comments) Lottie for Android, iOS, React Native, and Web - https://news.ycombinator.com/item?id=17209832 https://news.ycombinator.com/item?id=17209832 - June 2018 (18 comments) Introducing Lottie: Airbnb's tool for adding animations to native apps - https://news.ycombinator.com/item?id=13543927 https://news.ycombinator.com/item?id=13543927 - Feb 2017 (97 comments) Others?
- codetrotter 4y agoThe first of those links is the OP itself https://news.ycombinator.com/item?id=33886673 https://news.ycombinator.com/item?id=33886673
- dang 4y agoDoh! Removed. Thanks.
- havo 4y agoGreat work on the new release! I've been using Lottie for a while now and have definitely noticed the performance improvements with the new rendering engine. It's really exciting to see Lottie continue to evolve and improve. Keep up the good work!
- calstephens98 4y agoThanks!
- Dig1t 4y agoThis is awesome, I really hope they add better support for SwiftUI. It is annoying having to wrap this stuff in UIViewRepresentable.
- wackget 4y agoHow would these animations compare if they were rendered by a browser rendering engine in CSS and/or SVG?
- kridsdale1 4y agoEffing terrible.
- mmis1000 4y agoAnimate property of a svg node manually is definitely not a good idea. The overhead is really huge. The browser literally need to redo almost anything from start to render the path and hence the image. And even worse, it also need to synchronize DOM values...etc. Anything you don't care in this use case properly. Let alone the removed node need to be garbage collected, which is also a expensive operation if you even want to do it at 60fps. That is just multi horror movie combined.
- exabrial 4y agoWell now I understand why airbnb fees are so ridiculous... Guess all that UI fanciness comes at a price.
- cactusplant7374 4y agoI stay in the Airbnb for a month. If I like it I pay direct with bank transfers.
- csomar 4y agoI stay for two weeks now. Some places are just bad. Cash also work.
- bowsamic 4y agoThat is terrible
- cactusplant7374 4y agoWhy?
- gpeal 4y agoMaintainer of Lottie for Android here. I left Airbnb 5 years ago and have maintained the library 100% on nights and weekends for the past 6 years. I know your comment was sarcasm but fyi ;)
- danrochman 4y agoThank you for your service! Not sarcastically! (Would that be !/s?)
- mbesto 4y agoAmazing that AirBnb's dev team can release something this smooth and advanced but its messaging system is simply unbearable to use. What's up with that?
- gpeal 4y agoMaintainer of Lottie for Android here. Because it’s maintained as a passion project on nights and weekends by a few people. This contribution a rare exception in that it was actually funded and built during work hours at Airbnb. I left Airbnb in 2018 but am still the sole maintainer of the Android library, for example.
- ta-run 4y agoI've only heard of lottie but never really used it so I'm slightly confused with this. Were these issues present only in the iOS version of the library? or are these issues present across android, web, and RN as well? and will these platforms also get the upgrade?
- newZWhoDis 4y ago
- Semaphor 4y ago> Pretty much done with this trash site. Then do us all a favor, and already leave. The less there is of this toxicity, the better.
- dang 4y agoThis may have been a case of what I call the contrarian dynamic (https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sort=byDate&type=comment&query=%22contrarian%20dynamic%22%20objection%20by:dang https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor...): threads tend to fill up quickly with lazy and dismissive objections because those are the easiest and fastest to write. Then a second wave of "I can't believe how bad the comments are" comments inevitably shows up. Things eventually balance out as thoughtful users add more interesting comments—they just take longer to appear because they're more work to produce. That's what happened in the current thread. > Shame on you dang, where the fuck are you? Don't assume that we see the same things you do. Like other false assumptions, that can lead to mistaken conclusions! In reality, we only see a small portion of what gets posted to HN. There are far too many posts for us to read them all. If you see a post that ought to have been moderated but hasn't been, the likeliest explanation is that we didn't see it. You can help by flagging it or emailing us at hn@ycombinator.com. https://hn.algolia.com/?dateRange=all&page=0&prefix=false&query=likeliest%20explanation%20by%3Adang&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu... p.s. Could you please review https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html and stick to the rules when posting here? You've unfortunately been breaking them a lot.
- calo_star 4y agoHow do you animate paths (morphing shapes) with Core Animation?
- saagarjha 4y agoCAShapeLayer has support for this.
- blowski 4y agoI’m fascinated by AirBnB. So much modern tech business orthodoxy is around leveraging your core value proposition and outsourcing everything else. Yet here is AirBnB with their own iOS rendering framework. Is it part of their core value prop? Or do they ignore the advice? Or is their success causing them to waste cash on boondoggles like this? Or do these boondoggles help them attract engineering talent for less than they’d otherwise need to pay?
- gpeal 4y agoMaintainer of Lottie for Android here. The vast majority of work on Lottie has been a passion project on nights and weekends. This particular contribution is actually the rare exception.
- tgv 4y ago> The vast majority of work on Lottie has been a passion project on nights and weekends. That's sad. That's really, really sad. I get why you would like to work on such a project, but it's got considerable value for AirBnB. Your work doesn't go to the "community", it goes to a large, unscrupulous, unethical money factory.
- blowski 4y ago1. It’s open sourced, so it goes to both. Either AirBnB sponsor the build and promote it, or the community builds it and AirBnB uses it. I’m not sure why the latter would be better than the former. It’s better for the world than companies keeping all their libraries closed source. 2. AirBnB’s backing probably gives it more reach because it’s more likely to be maintained. 3. It’s up to the OP where they spend their time. I’m guessing they’re compensated in multiple ways for their efforts. I’m all for calling out negative behaviour by big tech when I see it, but kneejerk “big company bad” type reactions are counter-productive.
- tgv 4y ago1. This is not a common library that fits everywhere. It's pretty specialized. Using its full potential almost requires a commercial environment, because of the design and graphics needed. For everyone else, normal animations are annoying enough. 3. The parent post said: passion project/nights+weekends. That doesn't sound like multiple way compensation. It's not about negative behavior of big tech, but more of a "grind" mentality gone astray. I can totally understand being (somewhat) proud of a project like this: it looks friggin' good. I also expect a company to grab whatever it can; it's the way of the world, and some companies are quite immoral. But we should not be working on something of considerable value to entities with deep pockets for free, just because it hits those 2010s linked-in bingo words. That's not where your self-worth as engineers should come from.
- saagarjha 4y agoThere's a screenshot in the blog post that shows "0%" CPU usage. I doubt that Cal wanted to make it seem like animations were "free" but I do want to caution people that just because the GPU is now handling drawing doesn't mean the usual concerns with animations with regards to performance don't apply (I am not going to wade into the UI aspects of when to use animations). Animations are best used in moderation, for short interactions rather than running continuously all the time, even when drawn with graphics hardware. It's nice to push 60 (or 120) fps every once in a while but your app should really not be drawing at all most of the time. That's fewer frames to display in software, and on newer iPhones with ProMotion that's also going to mean fewer display refreshes. Your users, and their batteries, will thank you. (But really, moving all these things to CoreAnimation is really nice, kudos to all involved!)
- ChoHag 4y ago