When you’re in charge of your own website, there still often seems like a big gap between the quality of a website you create yourself and one that costs the big bucks to get made.
However, that gap continues to get smaller with innovations.
One of the newest innovations is Lottie - a high quality and interactive animation format that is easy to use and small in bandwidth.
Read on to learn the best tools and apps to make your own.
1. Bodymovin
The first tool on my list is the Bodymovin plugin. It’s an After Effects extension that will allow you to export JSON or even PNG files from your compositions. It supports exporting files with different shapes, effects, and all general fonts.
What's more important is their team is constantly working to improve the features. And the Bodimovin plugin provides access to export not just Lottie animations, but also to SVG, Canvas, and HTML+.
You can play those exported files on your browser through Bodymovin as well as on iOS and Android, so you’ve got the option to use them wherever you want, including your website, email outreach, app pages, etc.
Places where you can install the Bodymovin plugin.
The first is GitHub, which offers a free download.
But I’d advise you to get the plugin at aescripts.com. You'll be asked for $20, but in return you'll have a plugin that works without bugs and is automatically updated to the latest version.
Generally, if you’re looking for some great stuff that will help you on exporting Lottie animations from After Effects, then Bodymovin is the first choice you should consider.
2. Creattie
If you're one of those people who don't want to waste time and get deep into complex creation processes, Creattie could be a perfect solution. This platform offers a completely new experience for designers and non-designers alike.
Here you can explore many different Lottie animations for every industry. Creattie offers full packs of high-quality Lotties with outstanding design.
And the most amazing thing about this platform is that you can order custom Lottie animations tailored to your specific design needs. The highly skilled motion artists and illustrators on the team will take any design you can think of to the next level.
Made specifically for those who want Lottie animations to fit their branding and look more professional, Creattie could be the best solution so far.
3. LottieFiles
Another extension to export Lottie files from After Effects is the LottieFiles plugin. Overall, this plugin has all the same features offered by Bodymovin, but it also offers an instant mobile and desktop preview directly within After Effects.
Aside from the JSON format, you can also export your compositions as Telegram Stickers (known as the TGS file format) and DotLottie, which is set of JSON format, a special way to save Lottie files that makes them even smaller. It can hold many different Lottie animations and pictures all in one file.
You can also download the test and preview plugin from here, Google Play, and the App Store.
Besides being an After Effects extension, Lottiefiles.com is a large open-source server where users can find free Lottie animations, as well as some for purchase.
For creators, this platform has something to offer as well. You can submit your finished animations to their platform and get paid each time your work is downloaded!
4. Flow
This software is created specifically for UX designers who aren’t experts in animation but with this tool, will still be able to create their own animations.
Since Flow is developed specifically for designers, it's much easier to navigate through it and a couple of tutorials will be enough to jump right into the editing process.
The coolest thing about Flow is the fact that users are able to extract their compositions already coded as Lottie files in just a few clicks.
Flow Pricing and Lottie Export Options
Flow offers a $99 plan for animation creators, but if you want to export your animations in Lottie format, you should consider a plan starting at $199. These plans include essential code export, as well as the ability to export to HTML and animated SVG.
5. Synfig
For those who create their animations via Synfig software, we have great news. With the release of version 1.5.0, Synfig’s plug-in system underwent a major overhaul improving import/export functions. This change is huge for designers working with Lottie, but the expanded capabilities require writing the functions in Python.
If you are already a user, the new exporting features are now called through File → Export rather than the Plug-In tab.
Check out the documentation here for more information.
Synfig’s software update also improves the Lottie exporter, enabling a new mode that exports outlines without variable widths. The feature greatly reduces the size of the exported file.
While Synfig’s Lottie capabilities are still limited, the animation platform is 100% free and open-source. We imagine that more changes will come down the road to make working with JSON files more accessible.
6. Framer
Framer is an online platform built for those who love designing but not coding. Here, they’ll have access to different layouts, smart components, animations, etc.
For Lottie animations, Framer has developed something cool too. With drag-and-drop actions, creators can add Lottie animations to their projects.
What's more important is that once the Lottie animation is attached to the project, creators will be able to add changes to it. Things like controlling speed, direction, and even loop settings can be easily added just in a few clicks.
If you're a designer and want to add Lottie animations to your projects without having to code and do a few simple manipulations with those Lottie animations, then the Framer platform is worth taking into consideration.
7. Protopie
Protopie is a designing tool that helps creators turn their digital products into more interactive spaces. Using this tool, you can include Lottie animations to your projects and have them organically played in them without downloading any third-party plugins.
If you're creating prototypes with Protopie, make sure to check this new feature for Lottie animations to make your projects even more interactive.
8. Keyshape
Keyshape is a 2D vector animation tool for Mac. The platform combines vector animation drawing and animation tools within the same application. You can draw simple animated banners, icons, and vector graphics without having to learn complex software.
Since 2017, Keyshape has been embracing JSON-based animations with their Lottie Plug-In. The add-on allows Keyshape to read, edit, and export Lottie animations directly from the animation platform.
Keyshape is available in the Mac store for a one-time purchase price of $29.99.
9. Haiku
Adobe After Effects is, of course, the industry standard for creating motion graphics. But for Lottie animations that require less saturated graphic elements, you don't need to learn such complex software.
One of the alternatives for Lottie animations is Haiku Animator. It has fewer features than AE, but for things like Lotties, Haiku will be enough to get your work done.
This Software is easier to navigate through and keeps everything right at your fingertips. There’s no need to download extra plugins to extract Lottie animations, everything can be controlled right from one place.
10. Cavalry
Cavalry is a powerful 2D animation software available for Mac and Windows. The design platform is the tool of choice for many of the world’s most recognizable creative and technology companies, including Amazon, Google, and SONOS.
At only 16 Euros (about $17.50) per month, the Pro version of the software is relatively affordable, considering how easy the platform allows you to produce premium quality designs. While there is a free version you can check out to get a feel for the software, exporting Lottie animations is only available for paid users.
11. LottieLab
If you are looking for a tool designed specifically for exporting Lottie animations to your website and apps, LottieLab may be exactly what you need. The platform allows you to build animations from scratch or use pre-designed templates so you can incorporate unique content into your projects.
Lottie Lab simplifies the design, editing, and importing processes by leveraging the JSON-based file format. One of the coolest features is you can collaborate with team members on the same project “breaking out of the After Effects silo.” Lottie Lab is still in beta testing, but you can sign up here to get on the list. Based on the registration process, it looks like the software will be paywalled.
Final Words -
Hopefully this article has helped you find the best tools out there for creating your own Lotties. And if you’re looking for premium Lottie animations, make sure to explore everything Creattie has to offer!