Create Animations For The Web With LottieFiles and After Effects

imagine this you have a website and you're looking to add a splash of life to it that's where Lottie comes in latte in simple terms it's a unique kind of Animation crafted from code bringing life to every shape color and movement the best part no coding expertise needed lucky transforms your After Effects animations into small easy shareable files that blends smoothly into the web and other platforms so then why use motion motion is a vibrant form of Animation that breathes life into static objects making your content Stand Out captures attention and helps tell your story in an unforgettable way Studies have shown that the use of motion boosts overall user engagement and conversions it helps create an emotional bond with your audience drawing them and keeping them engaged in today's world motion is the future of design and Lolly files is here to make it easy for you hey everyone my name is Adrian and I'm motion designer here in Lodi files in this tutorial we'll dive into the fun process of creating sharing and implementing Lottie animations while Spotlight key features on a lot of files platform that will make your motion workflow more efficient and effortless now you might be wondering about the connection between Lori and Laurie files simply put Lottie is the animation file format while a lot of files is the PowerHouse platform community and Company that's making all this compact animation file format possible Lottie also offers developer friendly apis and libraries providing great control of overadimation for unique and dynamic experiences me as a motion designer I use after effects to craft eye-catching animations and thanks to Lottie I export these animations and bring them to life on my websites and apps without any hassle just follow the link provided below to download and install our AE plugin once you've successfully done that we can jump right into the really fun part for my current project I'm developing a personal website and my goal was to infuse it with animated graphics to make it truly extraordinary setting it apart from all the competition together we'll tackle something fundamental yet impactful like animating a button I'll guide you through how the lottery files for After Effects plugin can streamline your workflow and make all things incredibly simple here you can see my composition is prepped and segmented into layers it's always beneficial to strategize your animation process considering how you envision it appearing in various dates like default hover and click for car Adventure our Focus will be on infusing life into the hover state of abutment sweeps over it we want the button to burst into an exciting animation nudging uses duplicate now let's get our hands dirty with After Effects here are my composition settings to ensure my animations Glide as smoothly as possible I've set it 60 frames per second we'll be using Elementary After Effects properties like positions scale rotation opacity and path animation which allows us great control over the animation's nuance while creating multi animations it's advisable to steer clear on waiting effects that might not convert well into code to add a dash of flair to our animation I'll experiment with speed graph blending the animation more dynamism and appeal now I'm satisfied with the look of this animation so it's time to export with a lolly files plugin installed I simply head to the windows tab click here and a new window pops up I'll find my conversation and by clicking on the gear icon I'll open up more export settings if you've used rasterize images like jpeg or PNG check this box right here it will incorporate those files into your animation if everything checks out it's heightened to hit and render let the animation render for a moment and then you can preview it here this looks great to me so let's scroll down to the feature support Checker the goal is to have all these boxes checked this tool enables us to pinpoint any issues with the animation and ensure compatibility with the intended platform it's a handy feature for creators to minimize the back and forth with stakeholders or clients if everything is in order you can download your animation as dot Json or dot Lolly I'll go ahead and upload this to my audio files workspace the workspace is your personal log where you and your team can access all files think of it as a private collaboration Hub we'll delve into that in more detail in a short bit now I'm sure you're wondering what is the difference between Lobby false plugin and body moving can both Grid in their own ways but some of the things I appreciate about the lottery files AE plugin is the animation preview and the feature checker the preview allows me to visually check for any errors in the animation and the feature Checker helps me dive deep into some issues that you actually can't see allowing me to correct them before shipping it want to know how to work best with ladies well it's no secret here are some tips I keep in mind when animating a Lottie number one keep your composition in by removing unwanted layers and properties such as merge layers duplicated paths strokes and any other properties number two more keyframes means more data and that translates to bigger file sizes so utilize the speed graph to avoid using too many keyframes number three similarly clean up your path points because things like this adds to the file size if you have any other useful tips please do share them in the comments below I hope you're finding this helpful if you're looking to take up your animation skills to the next level be sure to check out School of motion's Animation bootcamp and if you're already comfortable with animation but you want to improve your design skills the design ball game course is a great resource links to both courses can be found in the description below now let's go talk about the lottery files platform head on to www.lodyfiles.com and I'm going to my dashboard here just imagine having something like frame IO where you can drop comments review preview and set statuses for your naughty animations it's a space the team has mindfully designed to ease collaboration pins and make the reviewing process as fun and simple as possible let me take you on a tour on the left panel here is where you can organize your motion files now repeat after me a good clean workspace is a happy workplace here in your projects you can create folders to keep things nice and tidy so that you and your team can easily access them easy that's how we've created it to be so now let's talk about file size for animations to play in batteries move on your web or app it has to be as small as it can be so let's take a look how we can optimize our file size to significantly reduce its size I'm going to click on this download icon and I'm present it with a few export options optimize starting Json file is a Json file that has been reduced in its size window affecting its quality you want to take it to the next level we have got Lottie and optimize the LRT a compressed format that is significantly smaller than the Lottie Json file think of it this way and MP4 is giant Ant-Man normal size and man is GIF and size and man is not Json and Quantum size and man is not bloody I think you got the idea if you're liking what we have so far good but hey we're not done yet it can also make changes to your bloody animations without going back to After Effects you don't have to reopen your After Effects file and go through that process again instead you can personalize customize and make changes to your animations and use your custom brand colors or you can use some of all presets that we in the team have beautifully created for your use if you need customizing features head on to this icon to use our Lottie editor here you have the ability to select layers specifically in your animation and do some custom edits like changing colors reorganizing their hierarchies or even hide them now if you're happy with the way it looks just click save you can also export your animations in other formats such as gifs and before mov and webm with Alpha channels for mov and webm in different size specifications to your liking collaborations has not been easier with all audio files platform you can easily invite team members to collaborate and manage all assets in your workspace and then with comments anyone can share their feedback on your Lottie animations you can also reply to their comments comments allows you to leave feedback on specific parts of your animation with this each team member will have full clarity on the feedback process if everything is good it can go right ahead and change the status to indicate the status of the animation if you're working with a developer we've carefully thought about that process as well simply click on this icon to enable asset link here and share the links to your developer and let them work their magic I changed your phone this video insightful and beneficial remember even if you're not a motion designer but require Dynamic animations for your project www.lodyfiles.com is your go-to destination with an extensive collection of over 80 000 free radius animations for every industry every use case imaginable with over 200 free animations added daily you can be assured that the library remains out today for all your design needs in our continuous effort to enhance your animation creation experience we are developing an Innovative tool a Lottie Creator designed to redefine how you create micro animations you can join the waitlist or the Lottie creator with the link provided in the description below we're eager to hear your thoughts on the course so feel free to drop a comment below don't forget to hit the like button and subscribe to school of motion and also the Lorry files channel for more enriching and cool content till then thank you and I'll see you in the next video [Music] foreign [Applause]

Channel: School of Motion

Views: 45,666

Keywords: Motion Design, Motion Graphics, After Effects, Tutorial, Tips, Tricks, Technique, Learn, Basics, Design, MoGraph, lottiefiles, creating lottiefiles, how to make lottie in AE, after effects lottiefiles, motion design web, lottie AE, lottie AE extension, lottie files after effects animation, optimize lottie files, customizing lottie files

Id: RB2XfWAQ7ps

Length: 11min 19sec (679 seconds)

Published: Wed Jul 12 2023