The challenge first started in 2015 with an motion script developer named Hernan Torrisi who was in a position to make use of Adobe After Results to export a illustration of an animation. He created a plugin for After Results referred to as Bodymovin that did simply that. In 2017, it caught the eye of builders at Airbnb (didn’t see that coming) who acknowledged its wonderful potential. The Airbnb staff constructed iOS and Android libraries that might render these JSON recordsdata.
Lottie was born, named as an homage to Charlotte “Lotte” Reiniger, a director and animator who made the world’s first feature-length animated movie in 1926.
For WordPress builders and designers, it’s been a dream come true – animations with out the bloat. Irresistible doodles, a lot of that are free to obtain, are being added to the LottieFiles web site on daily basis.
What makes Lotties so compelling?
1. The itty-bitty dimension
Composed of nothing however a small JSON file, a Lottie is commonly lower than 50 KB. That is considerably smaller than even compressed PNGs and GIFs.
This sizable distinction is completely illustrated by means of this picture seize of the JSON code for a Lottie animation. This Lottie file is simply 35 KB. By comparability, this static, specifically optimized jpg screenshot of the file is 91 KB.
2. Rendering
A Lottie animation may be resized to any on-screen dimension with out dropping decision. That is enormous! The file stays as small as may be, but may be scaled to a full-screen animation with out pixel distortion.
3. Tons of of free animations to select from
LottieFiles.com, the creator of the JSON format, has been rising on daily basis with 1000’s upon 1000’s of recordsdata being added by gifted animators. Right here you may peruse the ever-growing database for the right animations to suit your challenge’s motif. Whereas many are free, there are nominal charges for premium recordsdata usually lower than a few {dollars}.
What’s the best method to make use of Lotties in WordPress?
1. Seek for an animation
The plain first step is to seek for an animation on the LottieFiles.com web site. By choosing “Sort”, you may choose to seek for free recordsdata.
When you’ve chosen the perfect animation, you’ve gotten the choice to obtain it in three codecs: JSON, animated GIF, and an MP4 file. Choose the Lottie JSON file and reserve it to your laptop.
2. Set up a plugin
For causes unknown, the unique WP Bodymovin plugin was faraway from the WordPress plugin repository in November of 2020 and has not returned. However there are different plugins obtainable for the Gutenberg editor and for 2 widespread builders: Divi and Elementor.
Gutenberg Blocks – Final Addons for Gutenberg
Should you’re utilizing the Gutenberg editor which comes native in all WordPress installations, this free plugin is the one to make use of. Merely set up and activate this plugin by means of your plugin supervisor.
When constructing your put up or web page, add a brand new block and scroll down till you discover the checklist of blocks below the ‘ULTIMATE ADDONS BLOCKS’ heading. Discover the Lottie block close to the underside.
As soon as the block is added, you will notice an add button. Click on this and choose the JSON file you downloaded from Lottiefiles. The animation will robotically dimension to suit the container.
The customization menu (not pictured) for the block will probably be featured on the precise. Right here you may management the animation options corresponding to hover results, pace, looping, and sizing.
If in case you have the Basic Editor put in, which many websites do, you may nonetheless use this plugin, however solely on pages and posts that make the most of Gutenberg. To allow the flexibility to modify between Gutenberg and the Basic Editor, go to the settings of the Basic Editor plugin and tick the ‘Sure’ field subsequent to ‘Permit customers to modify editors’.
Now you may create new pages and posts with the choice to decide on an editor. The Gutenberg Blocks plugin will solely work with the Gutenberg editor enabled.
Supreme Modules Lite – Divi Theme, Further Theme and Divi Builder
Supreme Modules Lite is a free plugin for Divi customers. It provides various modules into Divi’s native system, together with the Lottie module. This function is an easy-to-use module that mixes the customization of the animation with the performance of Divi. Utilizing Divi’s built-in controls, you may place that animation wherever you want on the web page.
After putting in and activating the plugin, which is able to solely work in case you have Divi (a premium builder) put in, add the Lottie module to any column.
The module then offers you with an intuitive settings board the place you may add your JSON file and edit the animation.
Premium Addons for Elementor
Premium Addons for Elementor is a free plugin for these of you who use the Elementor Web site Builder plugin. What’s thrilling about this plugin is that they’ve enabled Lotties for use not solely in its personal particular person module but additionally inside different modules. This animation performance has been enabled in sixteen of its free and professional widgets, enabling you to really add a Lottie wherever you want.
You may add Lotties to widgets corresponding to buttons, pricing tables, and headings to create visually gorgeous designs. Say goodbye to difficult CSS animations!
Merely add the JSON file when prompted. A myriad of options means that you can management the animation.
Are you amazed But?
These spectacular animations convey web sites to life in a enjoyable and interactive method with out hogging sources and lowering web page load pace. The Lottiefiles.com web site has surpassed over a million customers and is attracting the eye of mainstream companies corresponding to Disney, TikTok, Google, and Uber. And only in the near past, Lottiefiles has secured $9 million in funding from Microsoft’s M12 Enterprise Fund.
I believe we’ll be listening to much more from this new enterprise within the close to future.
