GIFs are the standard way to insert animated images in any website creation platform, including WordPress.
However, the latest trend is to insert Lottie animations that display attractive interactive elements as images. While you can use SVG for scalability, Lottie allows more control over your animations.
If you are wondering what Lotties are and how to insert them in WordPress, here are some options to refer to.
What is Lottie Animation?
Lottie is a JSON-based text file format that can be used to insert animations in iOS, Android, and any web platform. This was developed by Airbnb engineers to export Adobe After Effects animation files to JSON format and render natively. Here are some advantages of using Lottie animations:
This is an open source format with a very small file size.
Text file format with runtime controls.
Interactive animations that can easily stand out from regular GIFs.
Scalable, high quality and works like a still image.
Lottie animation example Lottie animation example 2
Insert Lottie Animations in WordPress
Most free block plugins offer a Lottie animation block to insert animation files in WordPress. For example, you can use the Ultimate Addons for Gutenberg (now renamed Spectra) or the Kadence block addon for this. Here, we will explain how these two plugins insert Lottie animations in WordPress sites.
- Insert the Lottie animation using the Kadence block
Install and activate the “Kadence Blocks – Gutenberg Blocks for Page Builder Features” plugin from the WordPress repository. This is a free plugin for adding additional blocks with custom controls in the Gutenberg editor.
We recommend this plugin for Lottie animations as it creates a reusable block as a custom post type for every animation you insert on your website. Additionally, the Kadence block will allow uploading JSON files for Lottie animations, which is not supported by default in WordPress.
After activating the plugin, create a new article or edit the article you want to insert Lottie animations into.
Type /lottie to find and insert the Lottie Animations block.
Insert Lottie animation blocks with Kadence
Insert Lottie animation blocks with Kadence
The plugin will insert a sample animation file and you can see a lot of controls in the sidebar of the block.
Block settings are available in the following sections:
Source File – You have two options to paste the URL from a remote file or upload your custom JSON file. If you don’t have your own files, check out the last section of this article to learn how to get free Lottie animation files. Select “Local File” as the “File Source” to see a drop-down list of all previously created animations in your site. You can choose one of them or upload a new item to insert. The title you provide here will be used as the name of the reusable Lottie animation block.
Playback Settings – Under this section, you can control the behavior of the animation and set how it plays on your website. You can show play/pause buttons, enable autoplay and allow animations to play only on hover or page scrolling. You can also set the animation to loop and adjust the delay between loops.
Size Control – This setting allows you to set padding, margins and width to change the overall size. You can use these options to fit and align animations on the content area.
Advanced – This is Gutenberg’s default option for assigning custom CSS classes to elements.
Once done, add additional content to the page and hit the Publish button to see the Lottie animation in action.
Manage Lottie Blocks
Go to the Settings > Kadence Blocks menu and click Manage Lottie Animations under the Lottie Animations box. This will take you to a page where you can view all Lottie animations in one place. As you can see, every animation you insert in the Gutenberg editor is actually stored as a custom post type with the name “kadence_lottie”. You can also create new animations from here by clicking the “Add New” button. These are reusable blocks that you can insert anywhere on your website by searching for their name.
- Insert Lottie animation with Ultimate Addon for Gutenberg
If you are using the Astra theme or Kadence blocks are not working for any reason, then an alternative option is to use the Ultimate Addon for Gutenberg plugin (called Spectra). It offers similar Lottie Animation blocks, but with limited functionality. After activating the plugin, go to the “Settings > UAG” section and activate the “Lottie” option. Make sure to click the “Regenerate Assets” button and clear the cache for the changes to take effect.
Now create a new article or edit an existing article to go to the Gutenberg editor. Insert Lottie blocks by typing /lottie in the editor.
Unlike Kadence bocks, the UAG plugin does not support uploading JSON files. Therefore, you can only use the “Insert from URL” option and use Lottie file URLs from third-party sites. Otherwise, you need to enable JSON upload support using an add-on.
The UAG plugin provides “Controls” and “Style” settings for Lottie animation blocks. Under the Controls section, you can set the animation to hover, click, or play based on the viewport. It is also possible to loop at a defined speed and reverse the animation order.
In the “Style” section, you can adjust the width, height, alignment, and background color of the Lottie block.
Where can I get the Lottie animation files?
Now you know how to insert Lottie animations in your WordPress site. However, the problem is getting the free Lottie JSON file. Designers can use Adobe After Effects to create animations and convert them to Lottie files.
Additionally, there is an option to convert SVG files to Lottie format. However, an easy option for the average WordPress content creator and blogger is to reuse the free files available on sites like Lottiefiles.
As mentioned, Kadence supports uploading JSON files, but the UAG plugin does not. So make sure to upload using Kadence blocks and embed from the Lottiefiles site using the UAG plugin.
Go to the Lottifiles website and create a free account.
Use the top navigation to navigate to the “Discover > Free Animations” section and select the “Categories” menu.
Here you can view different categories of Lottie files and download your favorite items for free.
Select the project, click the “Download” button and select “Lottie JSON” to get the JSON file. You can use it to upload when using the Kadence block plugin.
For plugins like UAG, you can upload JSON using FTP and use the URL from your site. Alternatively, get the HTML and find the source file URL to embed it in your site.
Note that Lottiefiles also provides a WordPress plugin and an Elementor Pro widget for easy integration.