GIF is a standard way of inserting animated images in any website creation platforms including WordPress. However, the latest trend is to insert a Lottie animation that will show attractive and interactive elements as an image. Though you can use SVG for scalability, Lottie allows more control over your animations. If you are wondering what Lottie is and how to insert them in WordPress, here are the options.
What is Lottie Animation?
Lottie is a JSON based text file format that you can use to insert animations in iOS, Android and any web platforms. This was developed by Airbnb engineers to export Adobe After Effects animated files into a JSON format and render them natively. Here are some of the advantages of using Lottie animations:
- This is an open source format with very small file size.
- Text file format with runtime controls.
- Interactive animations that can easily standout from normal GIF.
- Scalable, high-quality and works like a static image.
Insert Lottie Animations in WordPress
Most of the free blocks plugins offer a Lottie animation block to insert the animated file in WordPress. For example, you can use Ultimate Addons for Gutenberg (now renamed as Spectra) or the Kadence block plugin for this purpose. Here we will explain with these two plugins to insert Lottie animations in WordPress sites.
1. Using Kadence Blocks to Insert Lottie Animations
Install and activate “Kadence Blocks – Gutenberg Blocks for Page Builder Features” plugin from WordPress repository. This is a free plugin to add additional blocks with custom controls in Gutenberg editor. We recommend using this plugin for Lottie animations as it will create a reusable block as a custom post type for each animation you insert on the site. In addition, Kadence blocks will allow uploading JSON file for Lottie animations which is not supported by default in WordPress.
- After activating the plugin, create a new post or edit a post where you want to insert Lottie animation.
- Type /lottie to find and insert “Lottie Animations” block.
- The plugin will insert a sample animation file and you can see plenty of controls in the block’s sidebar.
Customizing Lottie Animation in Kadence
The block settings are available under the following sections:
- Source File – you have two options here to paste an URL from a remote file or upload your custom JSON file. If you do not have you own file, check the last section in this article to find how to get free Lottie animation files. Select “Local File” as “File Source” to see a dropdown showing all previously created animations in your site. You can select one of them or upload a new item to insert. The title you provide here will be used as the name for your reusable Lottie animation block.
- Playback Settings – under this section, you can control the behaviors of the animation and setup how it should play on the site. You can show play/pause button, enable autoplay and allow the animation to only play on hover or page scroll. It is also possible to set the animation in loop to play indefinitely and adjust the delay between the loops.
- Size Controls – this setting allows you to set padding, margin and width to change the overall size. You can use these options to fit and align the animation on your content area.
- Advanced – this is a default option from Gutenberg to assign custom CSS class for the element.
Once you are done, add other content on the page and hit “Publish” button to see the Lottie animation in action.
Managing Lottie Blocks
Go to “Settings > Kadence Blocks” menu and click “Manage Lottie Animations” under “Lottie Animations box. This will take you to the page where you can view all your Lottie animations in one place. As you can see, each animation you inserted on Gutenberg editor is actually stored as a custom post type with the name a “kadence_lottie”. You can also create a new animation from here by clicking on “Add New” button. These are reusable blocks and you can insert them anywhere on your site by searching their name.
2. Insert Lottie Animation Using Ultimate Addon for Gutenberg
If you are using Astra theme or the Kadence block is not working for any reason, then the alternate option is to use Ultimate Addon for Gutenberg plugin (called Spectra). It offers similar Lottie Animation block with limited feature. After activating the plugin, go to “Settings > UAG” section and activate “Lottie” option. Make sure click on “Regenerate Assets” button and clear your cache for the changes to take effect.
Now create a new post or edit an existing post to go to Gutenberg editor. Insert a Lottie block by typing /lottie in the editor.
Unlike Kadence bocks, UAG plugin does not enable support for uploading JSON file. So, you can only use “Insert from URL” option and use the Lottie file URL from third-party sites. Otherwise, you need to enable JSON upload support using additional plugin.
UAG plugin offers “Controls” and “Style” settings for Lottie animation block. Under “Controls” section, you can set the animation to play on hover, click or based on viewport. It is also possible to play as a loop with defined speed and reverse the sequence of animation.
Under “Style” section, you can adjust the width, height, alignment and background colors for the Lottie block.
Where to Get Lottie Animation Files?
Now that you know how to insert Lottie animations in WordPress site. However, the problem is to get the free Lottie JSON files. Designers can create animations using Adobe After Effects and convert them to Lottie files. In addition, there are also options to convert SVG file to Lottie format. However, the simple option for normal WordPress content creators and bloggers is to reuse free files available in websites like Lottiefiles. As mentioned, Kadence allows support for uploading JSON file but UAG plugin does not. Therefore, make sure to use Kadence blocks for uploading and UAG plugin for embedding from Lottiefiles site.
- Go to Lottifiles website and create a free account.
- Navigate to “Discover > Free Animations” section using top navigation and then select “Categories” menu.
- Here you can view Lottie files under different categories and download your favorite items for free.
- Select the item, click on “Download” button and choose “Lottie JSON” to get JSON file. You can use this to upload when using Kadence blocks plugin.
- For plugins like UAG, you can upload the JSON using FTP and use the URL from your site. Alternatively, get the HTML and find the source file URL to embed it on your site.
Note that Lottiefiles also offer a WordPress plugin and an Elementor Pro widget for easy integrations.