Animation is one of the elements that make a web page looks attractive. GIF is a common animation format widely used by web designers. If you have been long in the web design field, chances are you have ever used Adobe Flash as well. Both GIF and Adobe Flash (Adobe Flash has now been sidelined by most web designers) have a common issue.
They tend to make a web page heavier to load. To fix this issue, a group of engineers at Airbnb developed a solution which was then introduced in 2017. Yes, right. The solution was Lottie. Lottie then easily became popular in the web designer and web developer community for one main reason: it’s lighter. Another reason, A Lottie file can be used across platforms (Android, iOS, and web) without additional coding and editing.
Lottie itself can be created using Adobe After Effects and Figma by installing a Lottie plugin. While to get ready-to-use Lottie files, LottieFiles is the best reference. You can get either free and paid Lottie files on the LottieFiles.
How to Add a Lottie Animation in WordPress
If you have a WordPress site and interested to add a Lottie animation, there are some ways you can use to do so, depending on the editor you use. In this article, we will show you how to add a Lottie animation in Gutenberg, Elementor, and Brizy. The Lottie file is taken from LottieFiles.
How to Add a Lottie Animation in Gutenberg
Gutenberg is the default editor of WordPress. You can use the Custom HTML block to add a Lottie animation in Gutenberg. First, go to the LottieFiles website and find a Lottie file you want to use. You can go to Discover -> Free Animations to find free Lottie files.
Select a Lottie file you want to use by clicking it. On the appearing window, click the html button on the Use this animation in section. This will open a new tab.
On the open new tab, scroll to the Generate Code section and copy the generated code. You can simply click the Copy Code button to copy the code.
Open Gutenberg on your WordPress dashboard and add a new block (the Custom HTML block). Paste the code you have just copied above. To preview the animation, you can click the Preview tab.
You can modify the code to change the animation size. To change the width, you can replace the value on the width variable. While to change the height, you can replace the value on the height variable.
How to Add a Lottie Animation in Elementor
If you use Elementor on your WordPress site, you can also add a Lottie animation to a page. Unlike Gutenberg, you will have options to customize the animation such as setting the trigger to start the animation effect, setting the size more easily, applying CSS filters, and so on.
To able to add a Lottie animation in Elementor, you need to use Elementor Pro since the widget to add a Lottie file is only available on the pro version. Once you are ready, create a new page (Pages -> Add New) or post (Posts -> Add New) and edit it with Elementor by clicking the Edit with Elementor button. Clicking this button will take you to the Elementor editor.
On the Elementor editor, add the Lottie widget to the anvas area.
Go to the settings panel (panel on the left side). On the Source option under the Lottie block, select how want to add the Lottie file. If you want to upload your own Lottie file (in the JSON format), you can select the Media File option and then select your file by clicking the upload icon. If you want to add a Lottie file from LottieFiles, you can select the External URL option and paste the URL of the Lottie file you want to use to the available field.
To set the trigger type, start point and end point, you can open the Settings block on the settings panel.
To set the animation size, you can go to the Style tab. From this tab, you can also apply CSS filters if you want to.
Continue to edit your page with Elementor. Once done, you can click the PUBLISH button on the bottom side of the settings publish the page.
How to Add a Lottie Animation in Brizy
Brizy is another page builder plugin that you can use to create beautiful pages on your WordPress site. Same as Elementor, it also allows you to add a Lottie animation to the page you are working on. The pro version is also required to add a Lottie animation in Brizy.
Once you have installed and activated the pro version of Brizy on your WordPress site, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Brizy by clicking the Edit with Brizy button. Clicking this button will take you to the Brizy editor.
On the Brizy editor, add the Lottie element to the canvas area. But first, you need to add a block. Simply click the plus button on the canvas area to add a block.
Once the Lottie element is added, click it to show the settings bar. On the settings bar, click the Lottie tab and paste the URL of the Lottie file you want to use to the available field (Brizy only allows you to add a Lottie animation from external source). As you can see, you can also enable the auto play option, loop, and set the speed.
To set the animation size, you can click the gear icon on the settings bar.
Continue editing your page with Brizy. Once you are done, you can click the arrow icon on bottom-right corner and select Publish Page to publish your page.
Summary
Lottie is a great solution if you want to add animation elements to a page, yet don’t want to make it heavy to load. Compared to other existing animation formats, say GIF and PNG, Lottie is way lighter. That’s why many web designers/developers now prefer Lottie when they need to add an animation element to the page they are working on.
While Lottie is being in the trend, it seems that it also has a bright future if you refer to the fact that LottieFiles (a website that provides Lottie files) has just earned a $9 million Series A investment.
In WordPress itself, there are some ways to add a Lottie animation to a page, depending on the editor you use. You can add a Lottie animation whether to a blog post or a landing page created with your popular page builder.
