Since its first introduction back in 2017, Lottie animation has instantly gained its popularity in the web creator community. Mainly because it is way lighter than other existing animation formats, inlcuding GIF. If you have a WordPress-based website and want to add a Lottie animation, there are several ways to do so, depending on the page builder you use. If you use Brizy, you can use the Lottie element to add a Lottie animation to a Brizy page. To use the Lottie element, you need to upgrade to Brizy Pro since the element is only available on the pro version of Brizy (read: Brizy Free vs Pro).
The Lottie element of Brizy offers some controls to allow you to set the Lottie animation behavior. For instance, you can set animation speed, reverse the animation move, disable the looping, and so on.
How to add a Lottie animation in Brizy
Lottie itself is a JSON-based animation format. You can create a Lottie animation using Adobe After Effects and Figma by installing a Lottie plugin. Alternatively, you can visit the LottieFiles website to get a ready-made Lottie animation. There are a bunch of free Lottie animation files you can get on the site. This article will show you how to add a Lottie animation in Brizy whereby the Lottie file is taken from LottieFiles.
First, visit the LottieFiles website and login with your account (you can also login with your social media accounts). Go to Discover -> Free Animations and click a Lottie animation you want to use. On the appearing window, copy the URL of the Lottie animation on the Lottie Animation URL section on the right side beneath the animation preview.
Next, login to your WordPress dashboard and edit the page you want to add the Lottie animation to with Brizy (or you can also create a new page). On the Brizy editor, add the Lottie element to the canvas area.
As you can see, the Lottie element automatically adds a default Lottie animation. To replace it, click the animation to open the settings bar. On the settings bar, click the Lottie icon. Paste the URL of the Lottie file you have just copied above to the Lottie Link field.
As you can see, there are four setting options you can set: auto play, reserve, loop, and speed. Simply set the settings you want.
To set the animation width, you can click the gear icon on the settings bar. You can set the width whether in pixel or percent.
