Today animation became ingrained in web design and seems to be a great addition to many website elements. It brings more life into the website and people’s attention often follows animations, which is the main reason for their use.
Nevertheless, don’t ruin your website with very heavy animation and increase your website loading time greatly!
Introduced in 2017, the JSON-format nature of Lottie files means they are significantly smaller than other file formats such as video or GIF, and Lottie is vector animation means Lottie files can be scaled up or down to any size, and the file remains incredibly small with no pixelation without compromising quality!
You can get over 1500 animations on LottieFiles or you can create one yourself using Figma, Adobe After Effects, or Adobe XD via plugins.
Using WordPress to build your website is no-brainer, WordPress is simply the world’s most popular way to create a website or blog at the moment, powering almost half of all websites on the internet. WordPress is a content management system that basically is a tool that makes it easy to manage crucial aspects of your website, like content without needing to know anything about programming. And there are more ways to easily make your website and give more customization in WordPress by using a page builders plugin.
There are several ways to add a Lottie animation in WordPress, depending on the editor you use.
How to Add Lottie Animation on Elementor
Elementor is a page builder plugin for WordPress. A page builder allows you to create a stunning web page without having to deal with either HTML or CSS. Page builder like Elementor — comes with a visual editor where everything is drag and drop. Originally launched in 2016, Elementor is one of the younger page builders. Even though it got a late start, Elementor has quickly racked up over 5,000,000 active installs on WordPress.org at the time of writing, and that makes Elementor the most popular page builder for a reason.
To add Lottie animation into your website using Elementor you need to have the Lottie files first and Elementor Pro version so you can use Lottie Widget which is only available on Elementor Pro version 2.10.0 or higher.
Firstly, prepare a section to place Lottie Widget on, and drag the Lottie widget to the canvas area from Elementor editor.
Then select the Source from the left panel, select Media File and click the upload button to use a Lottie file you have downloaded from LottieFiles — select the alignment you want, you also can give a link to the animation on the Link option.
If you want to use a Lottie file from a third-party source — change the Source into External URL and place the link in the space provided below.
To control the Animation behavior, open the Settings block, first option is the Trigger option, as the name implies controlling when the animation starts playing.
There are 4 triggers you can choose:
- Viewport triggers the animation based on the visible area of your device screen
- On click triggers the animation when clicked
- On Hover triggers the animation when animation hovered by the user cursor
- Scroll triggers the animation when the page is scrolled
For more customization options like setting the loop of the animation, selecting the renderer option, the width of animation, and giving motion effect on the animation, you can read our previous article on how to add Lottie animation in Elementor.
How to Add Lottie Animation on Divi
Divi is the most popular WordPress theme, however, Divi is more than just a theme, it’s a website building framework that makes it possible to design beautiful websites without ever touching a single line of code. With a built-in visual editor, it’s unlike any WordPress theme you have ever used before.
To use Divi on any WordPress theme, not limited to Divi and Extra only, Divi also has page builder available as a standalone plugin, here on how to install Divi Builder plugin.
Then onto the Divi Builder editor add the Supreme Lottie Module into the row inside a section.
After adding the module, a panel will appear, paste the URL into the field given, or you can upload the downloaded Lottie file into it.
Once the animation is ready, then you can change animation behavior like enable/disable the loop, delay speed, direction, animation speed, and the viewport.
For more detailed instructions on how to add a Lottie animation in Divi, you can refer to our previous article.
How to Add Lottie Animation on Brizy
Joining popular page builder like Elementor and Divi, Brizy is relatively new, with simplicity, lightweight editor, and intuitive drag and drop interface combined makes Brizy is a good choice for building your website pages.
If you used Elementor before then you won’t face much trouble getting used to it, as the interface is pretty similar to Elementor with the left panel on the left for adding an element into the editor, unlike Elementor which use the left panel to customize the elements, in Brizy customization is on the element itself when clicked.
To add Lottie animation on Brizy, you must use Brizy Pro since the Lottie element on Brizy is only available on the Pro version. If you are already on Brizy Pro, then you can search for the Lottie element in the Brizy editor panel and drag it into the canvas area.
After the default animation is in place, you can change the default link or upload the Lottie File to replace it, by clicking on the animation to open the element settings bar, then click the Lottie icon and paste the URL in Lottie Link for third-party hosted animation, or click + to upload the Lottie File. After your animation is ready, you can set the animation behavior the way you want it.
You can read our previous article for more detailed instructions on how to add Lottie animation on Brizy.
How to add Lottie animation on Gutenberg
Gutenberg is a new block-based editor introduced in WordPress 5. It replaces the classic WordPress editor, and it is a significant change in how content is created. With Gutenberg, you can add multiple media types and arrange the layout within the editor using blocks.
While Guttenberg is able to create stunning pages just like page builders do, Gutenberg is far behind when it comes to animation. So far, it has no native feature to add animation, and Gutenberg has no native block to add Lottie animation, however, you can use the HTML block to add a Lottie animation. It offers no setting option to control the animation behavior so that your Lottie animation will behave according to the settings you made on LottieFiles. You can’t even set the animation size.
To get the HTML code for the block, you can visit the LottieFiles website and pick one of the animations. On the appearing window, click the HTML icon on the Use this animation in section. You can set the animation size, speed, direction, and play mode. You can also set things like the background color, enable/disable animation controls, enable/disable autoplay, and enable/disable loop. Then scroll down to the GENERATED CODE section and copy the generated code. Let’s add HTML block into Gutenberg editor to place the code you copied.
To have some control over the behavior of the animation, you can use a third-party Gutenberg block, one of the plugins you can install is the Otter plugin, which offers a set of Gutenberg blocks, including the Lottie Animation block. You can get the plugin on the WordPress plugin directory.
The Bottom Line
While giving your website animation is a good way to grab people’s attention and make it more alive, choosing the right animation format for your website is very important so it’s not making your website very heavy to load and make people go away instead. Lottie animation offers lightweight animation and can be scaled up or down to any size, and the file remains incredibly small too.