Best Lottie Players, Plugins and Tools
Lottie has revolutionized the world of animation. To give a very basic definition, Lottie is a file format specific for animations, much like GIF. Due to Lottie animations, users can now display high-quality animations without any problems, such as pixelation, large file size, or slow webpage loading speeds. A single Lottie file is many times smaller than other formats, such as GIF, and can be easily edited.
The transition of the world towards Lottie animations has been quite smooth, thanks to the many tools available. To help you do the same, we have created our list of best Lottie plugins, players, and tools!
One of the most popular plugins for Lottie is Bodymovin, which lets users export rendered animations in .json file format directly from Adobe After Effects. It also supports PNG and SVG. This Lottie plugin is available free of cost on Github and supports many features, for instance, shapes, solids, images, comps, and nulls. Most text animations are supported except for Small caps or Vertical Scale. To date, the bodymovin plugin partially supports expressions, and many more are being added each day. This was the original extension introduced by the pioneers of Lottie, which allowed users to export, preview and play the Lottie animations.
The LottieFiles plugin does everything that users can do with Bodymovin and much more. It allows developers to instantly preview Lottie animations, share them during their developing stage from within the plug and make edits to them, such as background colour, file size, etc. Developers can push the animation to multiple devices with a single click, making the testing stage much easier.
The ‘preview’ tab allows users to view animations they have uploaded at any point in time. Moreover, the ‘explorer’ tab allows users to directly access the LottieFiles library from within the plugin. Users can then directly edit the layers and customize the Lottie animation according to their requirements. Hence, this plugin works better when the purpose is to share private demos of files or access already-made resources from the web.
Lottie Pro is an Elementor widget that allows smooth and code-less web integration of Lottie files. Users can upload any animation they like, trigger it according to the user interaction and adjust the dimensions and behaviour.
It also offers the options of both external URLs and direct upload to access the Lottie animations. Everything inside the widget is click-and-drop; for instance, to trigger the animations, users need to go to the settings tab and select the trigger from the drop-down menu. Selecting ‘hover’ from the menu means that the animation will get activated if the user hovers the cursor over it. Find information about all the excellent features available in this widget here!
LottieFiles Desktop is a Lottie player made specifically for windows and macs. Using it, developers can preview and test their .json files right from their desktops.
When the user logs in, it automatically syncs the Lottie animations already present in their Lottiefiles library. Once inside the player, users can change the background colour, take a direct screenshot and view useful information relating to the animation. They can also directly upload the animation to Lottiefiles.com. This is an extremely handy tool for anyone who wants to test the look and feel of their Lottie animations on their local computer.
Since Lottie files are highly customizable, allow high webpage responsiveness, and do not impact the loading speeds, they are quite popular for websites. Webflow also offers direct integration of Lottie files through their online website builder. Similar to Lottie Pro Widget, it also allows user interaction-based animation triggers with zero lines of code. To use Lottie animations using webflow, users must perform three basic steps:
- Create a container for the Lottie Animation.
- Create a Lottie animation in Adobe After Effects or access it from a Lottie library and drop it into the container.
- Select the appropriate animation trigger.
Your Lottie animations are ready to run and do their magic!
Apart from the popular export plugin, bodymovin also offers an online web player for Lottie animations. It has an extremely basic interface. It requires users to upload the Lottie files by dropping them directly into the player window. The Lottie animation begins playing automatically.
It offers two options to interact with the animations. Clicking on the running animation stops it. Users can stop the animation at any frame to view it. Secondly, users can use the keyboard key ‘c’ to change the background colour from transparent to black or white. Here’s a view of the bodymovin Lottie player:
SVG to Lottie is a small tool available on the LottieFiles website. You can access it by typing https://lottiefiles.com/svg-to-lottie in the search bar. Although small, the SVG to Lottie tool carries immense benefits for animators and creators. It allows developers to animate their already created SVG icons and illustrations.
The process involves dropping an SVG into the tool and selecting the type of animation users want to apply to their file. It also provides options of uploading the file for a preview or downloading it as a Lottie.
Skottie is a native player for Lottie files. It is a part of Skia, a 2D graphics library that offers APIs and works as a graphics engine for many notable sites. The Skottie player allows users to run Lottie animations online to preview them. Developers and creators can also view a performance chart of the running Lottie file. Furthermore, it has a built-in GIF creator that provides a direct download of the newly created GIF. There is also a text editor and animation editor present in this player. Users can upload any Lottie animation and play, rewind, edit or export it. Overall, Skottie provides much more options and powerful tools to its players. However, the interface can be better, and it is still in the testing phase.
LottieLab is an animation editor, introduced as an easy-to-use replacement of After Effects by the popular web-based editor Figma. The problem with Adobe After Effects is only one –it is not everyone’s cup of tea. Figma has successfully addressed this problem by bringing everyone on the same page.
With the help of LottieLab, developers, designers, and managers will be able to work seamlessly through the same platform without having to share folders and files. The app will support multiple persons working simultaneously on the same project, much like Google Docs. Furthermore, users will be able to import their assets from Figma, Illustrator, After Effects, etc.
Currently, the app is in the beta phase, with more than 3000 signups present on the waitlist, which includes big names like Google, TikTok, and many more!
10. Vidalgo Viewer
Vidalgo Viewer is an upcoming web player for Lottie animations. Currently, a few animations present on the blog can be played through the viewer. It also offers a direct download in various formats, such as JSON, GIF, MP4, and MOV. Users can also share the animations with the help of a link or through direct posting to several social media platforms.
In the future, users will be able to upload their animations, edit them inside the viewer or save free animation ideas by other artists in their gallery. Furthermore, users will also be able to convert their artwork into NFTs and sell them on the OpenSea marketplace. It can prove to be an excellent tool along with a library for people who use, create, edit or tinker with Lottie animations.
Contact us here for more information about the viewer and its full release.