 So, whether it be conceptualizing a crazy product or injecting the light to your apps, motion tells a story and I will tell you a story. One time a designer and developer were working peacefully in their offices and they had a happy hour in the evening, so designer drank a lot and he was high that day and because he was high he created this awesome animation because it increases your creativity, so then the other day developer was feeling a little low because he didn't know how to do this because he was, this was a tough one this time. So, with Lottie all are happy this is a library presented to us by Airbnb and I will talk about it. For most apps animation is an afterthought and people, you know because of the time crunch people the animation part falls off the radar, so because the designers want to shift the assets and the developers want to get the functionality right, so this is Lottie animating the bridge between designers and developers. I have written a blog post in which I tell how to install body movement in After Effects then render it and export the JSON which is the intermediary thing which has to be then imported into the Ender Studio, Xcode or other platforms for react native and stuff. So, because this is a mobile thing, so animations in mobile are like we can build it by hand. There was a library by Facebook which is keyframes which is very helpful, there are GIFs but GIFs are larger in size and then there is animated vector drawable body movement also has now a capability to export AVDs, there is Quartz 2D for iOS which works pretty awesomely like I talked to one of the iOS guys and then there is Lottie for all of them. Well we have a winner which is yeah I am not very like evangelizing Lottie but because Gabriel Peel who invented Lottie for Android and there is another guy for iOS, so they are like pushing it a lot and you had your Chocopie, well it is not, well Lottie is named after German film director and the pioneer of silhouette animation which whose name is Lottie Reiniger and she you know that like I told you she was a pioneer of animation, so she used to create some animated films and you know that was a long time back and then Lottie got inspired and took the name from it and it is a tool by AABNB that passes AE animations exported as JSON with body movement and renders it on the go. What else now engineers can use the files I mean the exported files exactly how it was made there is no manual tweaking by hand all the time which is taken else. So like they say charity begins at home so they used it in their own apps I mean AABNB's own app first and then yeah there is this developer at Google who is also designer his name is Nick Butcher and he quotes that dropping this into the app felt almost like cheating he had never done such complex animation such little time so this was the screen shot from the IO app and it is also inspired by the animation libraries previously available which are Squall, Keyframes, Rubber Horse, Night Square, Motion Cops, Animagraphy and the workflow is pretty simple we have to have a licensed version of After Effects and there is a body movement plugin which we need to install and then we can you know create some translation rotation scale any kind of animation exported and render it using body movement body movement and then Lordy can you know use it by one line of code. So the experiment was that they took certain animations like the wishless heart and the jumping pin or the hamburger rotating into a back button and they said that it took twice I mean not twice a lot of time inventing it by hand but using Lordy they just had to put it in the asset like we do for an icon so how it works it's easier almost magical so this is like you can see we can create an animation in After Effects there are certain you know we have to set time frames from zero to say one or two seconds and then then we can rotate animate more shape anything we can do and then sorry we have to export it using body movement they're simple I mean we go to plugins and then shoot body movement and then click render that's done you get a JSON file when that's done and that is gibberish so this is a non-needable file which is a JSON and this is what you import onto your Android Studio or Xcode now what Lordy internally does is on the mobile is that it iterates through all the layers the colors the shapes and then you know deserializes it and you can see the animation going on what also you can do is like when designer creates an animation he can just pick the file put on to lordy files dot com which is a community contribution by not to there's a guy so you can put that on to your browser drag and drop and then you can you get a QR code which you can then scan through QR code scan which is in the sample of a body when you scan that it loads the animation from the network and then sorry and then you can play that animation and then there's a bit of coding for Android we have to add the compile dependency 2.2 so is I think the latest and then you have to add only the view into the XML you can look through you can you have to specify the file name which is in the assets folder and you can do autoplay 2 and so on you can also do it programmatically then you use the same animation Lordy has a strategy to catch the animation there are three kind of strategies which is strong we can not you can hold a weak reference strong reference or you don't need to for like if you want to use animations in say a list you can use cancelable which gives you composition and then you can set the composition on your animation view also you can load it from a JSON object like here you can see we can reference from our assets folder and the JSON file we can set the composition to the Lordy animation view and also if we do it from the network we can make a retrofit call or an API call and we get the JSON string we convert it onto a JSON object and then pass it to this method from JSON and we get the conversation we can also add listeners we can we can do do on start on end we can also set the progress setting the progress is something very which is interesting because this is what we this is something we can do with AVDs like we can hook this progress with some scroll listener or gesture listener maybe in splash and then we can also set the duration start the animation cancel the animation and similarly for iOS we can use cocoa pods or cartridge which is like how to install it then we can add the JSON file to our project and do similar thing we can add a subcuto the main view and play it or like we can add a web URL and use it using NS URL so I've created these three three tutorials which tells how to install body moving creating an animation and then putting it on when in the project to work just fine you can check that out there on youtube the pros the workflow is very simple like I told you from AE to body moving to the platform and then the cross platform it is available it is available in android web and iOS also it has a very wide features port it goes back to API portal also we can progress scale and speed control and we can animate anything on demand and there more it supports JSON files over the network like I told you we can load the JSON into a JSON object which is also useful for AV testing it is it has an optional caching mechanism and lotty animation can also be driven by gestures like I told you for like splash you can see the lotty sample they have done a pretty good job like you can just go next next and it animates like and then there's a text delicate for text animations maybe for internationalizations or localizations as we like to call it now what this does is like we can we can pass we can do any kind of animations from text and we can set the text like I want to set it as fragments 2017 it will show it if I want to change it I can also this is a feature in android I guess for now and for iOS we have like we can specify a layer and give it a name we can like and we can also change the color of different layers for example like we have we want some kind of animation in which we this is a room and we want to show all the heated areas we can make them red if we have a football team and we want to specify different colors to it we can change them on runtime and also we can change also there is this thing where we can in the assets folder we can also put another folder in which we can put all the images so if there's an image which is used by you know the animation file json file because images can be kind of heavy and it is basically on top of vectors and layers so images can be kept separately and they can be picked whenever needed so we can there's a method for that and the cons are there are little problems issues with complex animations why because complex animations are also an issue otherwise well for what I think and other people also think the same thing that these animations should be used for hero and like loyalty should be used for hero animations and not like basic animations like in splash or loading screens or empty screens like we have we had an app right in which we wanted I mean it was a pharmaceutical app and they wanted to fill in the bottle of syrup so we could show something like the water is filling some things which we can't do with avgs and other words so there are some black boxes because the json file is non-edible hence non-tunable and the method count is like we think a lot while putting some dependency in your project the method count is fairly okay between glide and Picasso and then there's also the text count is also in between the two it doesn't work well with all the text animations well the problem which was like there's a workaround for it that we have to convert the text to shapes like I tried to get and it played fine on lotty files.com but when I put it in my android studio the text wasn't very clear so I looked for it and they said convert the text into shapes and I did it and it worked just fine and masks and mats are less performant as the renders layers using the buffer so if you're using masks and mats which is the terminology of artifacts you should be using hardware accelerates and who uses lotty well uber and twitter in your times periscope airbnb slap yahoo and v at fuel these are the references for from where i made this presentation and this is the website that i told you about a lotty files.com this is like an open source collection of different animations that people have posted on it and they have reached some 10 000 animations so also recently lotty collaborated with the the noun project and they created these modern pictograms which are like little icons which can be used with lotty and these are open source you can check them out in the link also there are some complementary tools well after the advent of these few libraries they're like google launched these two project products which are sketch to ae in which we can just select the sketch file and then use sketch to ae plugin and copy it onto our artifacts what it does it it parses all the sketch groups and you can see that you have the same screen in artifacts you just make the animations here then there's another plugin called inspector space time in which we can select a particular keyframe keyframe collection and then it'll show us like this is for like if we want to make reference videos for like for animations that we have to show the tool developers so what it does is it takes all the keyframes and then makes them into like you can see alpha and all that position and the opacity well thank you i like to thank who was the co-founder of lotty files.com and there is a designer and we have a co-working space we have a company by colorblind this guy just first thing told me how to work with After Effects and there's Garima Jan who is a senior and a dev at tuit and here's a silhouette shot by me at Kee Ganga in Marshall Pradesh if you guys are interested in tracking you should go it's a very good place this is me Chetan Satsadeva I'm an android dev at pulde this is my editor any questions hello okay thanks for the wonderful presentation uh so my that you need to have a dope after effects yes which is like a corporate solution again uh what is the community moving towards developing some sort of open source uh do you want it for developers i'm not sure what is it like AE is not a duct tool if i can't pay for AE okay okay something you can use all the like already built animations like in lottyfiles.com or there's a 70 trial you can try that hi Chetan so i wanted to know you hi chetan so you didn't tell me about uh does it scale properly for different dimensions of phones sorry i'm not you know does the animation scale properly for different dimensions of phones didn't touch that part i guess in the slides scale properly yes they scale like there's no pixelation when you scale them uh if you compare it to the GIFs they do have pixelation uh because why they don't uh pixelate is because like they use layers and vectors all that stuff bezier curves we have one last question this side yes you can there's uh this lotty demo like there's a sample uh on abnb slash lotty GitHub page you can check that out they have actually like like i told you about the QR code scanning thing so what they do is they load the uh animation from retrofit and then they parse it into a JSON object and then they consume it yes uh from what i saw is like they had done something like body dot uh sorry response dot body dot string so they get the string i mean this file has a long string part and so on so they get that string and they make it into a JSON object thank you chetan