Complex Lottie Animations From After Effects Always Failed Until I Tried This

getting an animation like this with blurs Distortion glows working in Lotti is nearly impossible and it ends up looking like this which is nothing like what we animated here's a trick that works every time with any effect let's dive in I'm using a gazan blur a glow a turbulent displacement a little bit of noise and there are just some effects that will never work with L like glow and like turbulent displacement it just doesn't convert to the way that LTI renders animation and so say that this is something that we've been working on there's no other way to build it we don't have engineering resourcing to build this thing with code and we just need it to work and the way we're going to do that is with a PNG sequence and I know PNG sequences can be really really heavy as far as file size but sometimes if it's in the right context and it's a short enough animation it can work so the first thing we need to do is optimize our resolution and our comp size you don't want to create this larger than you need to because it's not going to be an SVG scalable Vector graphic that is resol ution independent this is going to be actual PNG raster image that will take up more size the larger resolution that it is so let's make this as small as we can so an easy trick to do that is basically go to the largest portion of your animation and you can use this region of Interest tool so if you click that what I can do is just SE drag and select and I can just select just right around where my animation is taking place try to keep it centered as that will just make it easier with positioning so let's make sure that this is nice and centered let's make sure it's not things are not going off the edge and this seems pretty good let me expand it just a little bit and what I'm going to do is go to my composition and I'm going to crop comp to region of interest and now that's cropped my entire composition so now it is at a resolution of 458 by 469 so now I have a lot less pixels to deal with so therefore my pgs are going to be much more optimized so now what we'll do is we'll export this as a PNG sequence you can do that right in After Effects if we go up to file export add to render CU and we'll go to Output module and we'll change this format from whatever you have it all the way down to PNG sequence post render action import what's very important is that our video output includes the alpha that will allow our animation to have a transparent background so that you can put this on whatever you need it to we'll render that thing another thing to note depending on where this animation is going to live right here in After Effects I'm working at a frame rate of 60 frames per second that means if I export this as a PNG sequence I'm going to have 60 images every single second every image takes up more space so a way that we can significantly reduce the amount of resources that this is going to take is we can actually change that frame rate so let's go ahead and go to the composition setting and we'll change the frame rate to something like 24 frames per second let's go ahead and Export that again so we can further optimize the settings by going to the render settings and changing the resolution to maybe a quarter and so that will take it from 400 pixels all all the way down to 100 pixels and since this is going to be like a tiny icon on a website that will take up significantly less space so let's hit okay so we can see this one right here is when we exported at 60 frames per second and we didn't reduce the resolution so it's at a 400x 400 resolution and 53 megb is a little bit too heavy but if you see our optimized one we changed it to 24 frames per second and We Shrunk it down to 100 by 100 resolution and the file size is significantly reduced here which is fantastic so what we're going to do is go ahead and drop this into a new composition now we can play that PNG sequence back you can see that the quality is not amazing when we zoom in right we're now raster based and so these are all pixels and so when we zoom in we don't get crisp edges and all those sorts of things which is okay if it is looking good at the size that it's going to be displayed so when we're looking at it this small it looks great and that's the size that is going to be displayed in the website where it's going so now let's head over to body moving which is how we're going to export this as a l file so let's make sure we have our body PNG selected and in settings what we want to make sure is that in our assets that we actually include the rasterized images inside of our Json so that we don't need to reference an external folder that holds all these images and it gets a little bit messy that way and this way it's all contained in this one Json file you can enable compression in my experience this setting has not really like done anything for me but you know we can leave it on anyways then let's make sure that we have demo selected so that we can have a little HTML for our local preview and we'll render that up out and you'll notice it takes significantly longer to export this PNG sequence cuz it's really taking all of the images and embedding it into the L file and it's much simpler to do SVG animated graphics but since we have effects that don't work with that method this is how we have to do it so this is what we had before the PNG sequence so this is just native L you can see that the glow is not there the turbulent displacement is not there and this is our PNG sequence so it's exactly as we animated it inside of After Effects and we're seeing the exact same thing here CU it's just running through every single image and just showing us those things and we can see here that it is also still transparent we could have exported a gif in place of this and maybe the file size would be a little bit smaller but when we use this PNG sequence nested inside a l file we have all of the great playback controls that we get with LTI where we get our we can have hover interactions we can have tap interactions we can Loop we can reverse all of those sorts of things work really really nicely inside a body and that's how no matter your effect or what your animation looks like you can get your animation in inside of a l file every time catch youall next [Music] time

Channel: Motion UX

Views: 1,211

Keywords: applemotion, designchallenge, designfeedback, designinteraction, designprompt, interactiondesign, interactivedesign, interfacedesign, motion, motiondesigner, motiongraphic, motiongraphics, productdesign, responsivewebdesign, servicedesign, sharpendesign, uidesign, uidesignpatterns, uiuxcafe, uiuxdesign, userinterfacedesign, ux, uxdesign, uxmotion, uxmotiondesign, uxresearch, uxswipe, webdesigninspiration, webdesigntrends, websitedesign

Id: syC_NJHvJlQ

Length: 5min 40sec (340 seconds)

Published: Mon Apr 01 2024