Animations are a great way to add interactivity to your website and improve the user experience. Nowadays, they are essential to attract traffic and generate conversions. That is why, in this article, we will explain you how to add Lottie animations to your WordPress website.
Lottie is an animation library created by Airbnb that stands out for its small size. The animation data is exported as JSON files, which makes it easy to use on different platforms. Although the main tool for creating and exporting animations is After Effects, there are other options such as Fable, Aninix, Inkscape, Synfig Studio, Flow and Cavalry.
Here are two different ways to add Lottie animations to your WordPress site:
Using the Otter Blocks plugin
Although there is a Lottie Files plugin for WordPress, it has not been updated in nine months and has compatibility issues with some block editors, including Gutenberg. Therefore, the Otter Blocks plugin provides a simple way to accomplish the same task.
The steps to follow are as follows:
- Login to the WordPress administration panel and click “Add New” under the Plugins option.
- Search for the Otter Blocks plugin, install and activate it.
- You will notice that new blocks have been added to the Gutenberg editor.
- Go to the Lottie Files page, select an animation and copy its address. If you have created your own Lottie animation or downloaded it, upload the JSON file to your WordPress Media library.
- In the page editor of your WordPress site, click “+” to add a block and select “Lottie Animation”.
- Paste the animation address previously copied from the Lottie Files page or select your file from the media library.
- In both cases, the animation will be displayed immediately.
Using HTML and JS code
This method requires editing of your theme’s function.php file, so we recommend working with a child theme to avoid losing changes after an update of the parent theme.
The steps to follow are those:
- Edit the function.php file and add the lines of code below to add the Lottie player:
wp_enqueue_script( 'lottie-player', 'https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js' );
If you want to learn more about how to use this function, visit the link to the official website here.
- Add the Lottie animation, via an HTML block. To do this enter the following code:
<lottie-player src="your-animation-lottie-url-here" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
When you publish the page, or simply preview it, you will be able to see the animation in action.
And that would be all, as you can see, adding a Lottie animation to WordPress is really easy, so we hope this information is useful and that you can add attractive and effective animations to your website.
Thank you for reading, see you next time.
