The undertaking 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 known 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 group constructed iOS and Android libraries that would 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 each day.
What makes Lotties so compelling?
1. The itty-bitty measurement
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 way of this picture seize of the JSON code for a Lottie animation. This Lottie file is just 35 KB. By comparability, this static, specifically optimized jpg screenshot of the file is 91 KB.
2. Rendering
A Lottie animation could be resized to any on-screen dimension with out dropping decision. That is big! The file stays as small as could be, but could be scaled to a full-screen animation with out pixel distortion.
3. Lots of of free animations to select from
LottieFiles.com, the creator of the JSON format, has been rising each day with hundreds upon hundreds of recordsdata being added by gifted animators. Right here you may peruse the ever-growing database for the right animations to suit your undertaking’s motif. Whereas many are free, there are nominal charges for premium recordsdata usually lower than a few {dollars}.
What’s the best means 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 “Kind”, you may choose to seek for free recordsdata.
When you’ve chosen the best animation, you may have 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 out there for the Gutenberg editor and for 2 frequent 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 way 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 beneath the ‘ULTIMATE ADDONS BLOCKS’ heading. Discover the Lottie block close to the underside.
As soon as the block is added, you will note an add button. Click on this and choose the JSON file you downloaded from Lottiefiles. The animation will robotically measurement to suit the container.
The customization menu (not pictured) for the block might be featured on the proper. Right here you may management the animation options corresponding to hover results, pace, looping, and sizing.
When you have the Traditional 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 power to change between Gutenberg and the Traditional Editor, go to the settings of the Traditional Editor plugin and tick the ‘Sure’ field subsequent to ‘Permit customers to change 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 a variety of modules into Divi’s native system, together with the Lottie module. This characteristic 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 when 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 in addition 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’ll be able to 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 lets you management the animation.
Are you amazed But?
These spectacular animations convey web sites to life in a enjoyable and interactive means with out hogging assets and reducing 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 recently, Lottiefiles has secured $9 million in funding from Microsoft’s M12 Enterprise Fund.
I feel we’ll be listening to much more from this new enterprise within the close to future.
