If you have to use it, cover as small of an area as possible. Not only do a bunch of keyframes mean trouble, Alpha Matte and Mask size matter and can significantly impact the performance. Duplicating the same keyframes on related layers adds useless lines of code.Īnimating along a path or using presets like Autotrace or Wiggler generate a lot of additional keyframes and can make your JSON file size very problematic. The first tip is to use the “parenting” technique on any occasion because extra keyframes mean extra kilobytes. Be aware of the consequences of long loading times and lagging animations.īy mistake, you can add unwanted kilobytes to your perfect animation. Developers are crazy about the small sizes of their websites and apps, and you should be too. One of the most important advantages of Lottie is the lightweight exported JSON file. I would recommend cleaning these layers right after importing to avoid possible problems in the future.Īdditional tip: Remove assets from the composition after you’ve converted it to shape layers. Unfortunately, in some cases, you have to rebuild it differently and animate it one more time. The first task, when spotting the problem, is to dig into each shape layer and remove the merge paths or groups to make the composition neat. Usually, the animation is broken somehow and acts weirdly invalid. However, after some long, hard work when exporting it and previewing it with Lottie, some mysterious, bad things start to happen. Those useless elements do not influence much animation on preview in AE. You can find stuff like additional merge paths or groups. In most cases when you add an asset prepared in another software and convert it into an After Effects shape, there will be some unnecessary things hidden in the layers. Yet, you should be cautious about what exactly you’ve imported to your composition.Ĭlean your shape layers right after importing from Adobe Illustrator For Sketch the instructions are even more complicated. Of course, we can import content from software like Illustrator and convert any vector asset to AE’s shape layers. It’s obvious that Lottie works best with shape layers, but to be honest, sometimes it’s painful to draw vector illustrations in After Effects itself. Keep your project as simple as possible and create beautiful animations! The safest, but maybe not the easiest solution is to focus mostly on “pure” shape animation and, if you have to, use the supported features. Since not all features are supported on every platform, you need to check a long list of supported functions first. The platform (Android, iOS or Web) where you’re planning to use the animation is also significant. Also, forget about Blending Modes, Luma Mattes and Layer Effects (like a Drop Shadow, Colour Overlay), because it doesn’t support these features either. Unfortunately, the Lottie library doesn’t support some of the essential functions of After Effects such as Expressions or Effects (from the Effects Menu). Using and depending on known tricks, plugins, presets and expressions in After Effects is the first common newbie mistake. Mistakes to avoid when creating animations in After Effects for Lottie:Īfter years as animators and designers, we get into a lot of habits when it comes to planning and creating animations. If Lottie is new for you and you want to save client’s money with an easy-to-use tool or avoid hours of struggle with implemented animations that aren’t working, here are some of the most common newbie mistakes. Before you even begin planning your future animation, you have to understand that Lottie has several limitations, like a specific list of supported After Effects features or forbidden plugins. Lottie uses JSON files exported from the free After Effects plugin Bodymovin.Įveryday After Effects workflow is slightly different than creating animations for Lottie. It’s an iOS, Android and React Native library that renders animations created in After Effects. The Airbnb Team introduced Lottie in 2017. It reduces the costs of writing a thousand lines of codes and lets developers quickly implement even the most complex animation. Lottie is an open-source, efficient and flexible solution, that makes implementing animations painless and smooth. Common mistakes made by newbies when creating animations in After Effects for Lottie.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |