Kadence Blocks 2.2.4 adds Lottie animations block – WP Tavern
Kadence Blocks, a popular block collection plugin, added a new Lottie Animations block today in version 2.2.4. Most of the blocks in the plugin offer commonly used page building features such as rows, buttons, galleries, and testimonials. The Lottie Animations block introduces something a little more fun and whimsical.
Developed by the Airbnb design team, Lottie is a lightweight, open-source animation file format that’s popular with developers and designers. It is lighter than older motion graphics formats and faster to handle. The vector format allows animations to be enlarged or reduced without loss of quality. The LottieFiles platform is a community where designers and developers share their creations for others to use.
The new Lottie block from Kadence Blocks makes it easy for WordPress users to use and customize Lottie animations. This is not the first plugin to offer them. Lottie Animations are available for Elementor Pro users and are included in a few other collections, such as Gutenberg Blocks and Templates Library by Otter and Ultimate Addons for Gutenberg, as well as the Lottie Player plugin.
Lottie animations can be added to WordPress content by pasting the oembed link in the editor or using the embed block, as you see on this page. The downside of using them this way is that you won’t have any control over how they look and move.
The Kadence Block implementation is in the free version of the plugin and includes block controls to further customize animations. Users can adjust playback settings, such as autoplay, enable/disable controls, and change playback speed and loop settings. Animation size, padding and margins can all be customized.
When you first use the block, it displays a placeholder for the animated WordPress logo by default, but you can change the URL in the block settings to one from LottieFiles if you find one you want to use.
Animations can be referenced in the block using a remote URL (probably the most common), or using a local file. The feature also has its own admin screen where you can manage all your animations.
Controls show how scalable animations are, whether set to full width or reduced to a small icon. They respond well to block alignment checks and can be used in any content where blocks are allowed or even in templates.
The block requires Lottie Player JS to load and parse JSON-based animations, but Kadence WP representative Kathy Zant said performance was modest compared to previous animation technologies.
LottieFiles animations can be edited on the website to change background color or change animation layer colors. Users can export the updated file in Lottie JSON format for importing into blocks. Instead of creating your own Lottie animations from scratch, this could be a way to recolor existing animations to match your brand. These files can be downloaded and imported into the Kadence Lottie block to add engaging animations that will work on any device.