Despite the ability 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. There is no setting option to add either entrance or exit animation effects. Also, Gutenberg has no native block to add Lottie animation. But it doesn’t mean you can’t add a Lottie animation to your Gutenberg-powered page. There are at least two ways to add a Lottie animation in Gutenberg.
Lottie itself is getting more popular these days due to its lightness compared to other animation formats. Adding a Lottie animation can help your page more alive and appealing to visitors.
Two Ways to Add a Lottie Animation in Gutenberg
Before adding a Lottie animation, you definitely need to have the file of the Lottie animation you want to add first. While you can create one using Figma, Adobe After Effects or Adobe XD via a plugin, LottieFiles offers over 1.500 ready-to-use Lottie animations you can use. From free to paid. In this article, we use LottieFiles for the Lottie animation source.
Method One: Adding a Lottie Animation to Gutenberg Using Native Block
We said that Gutenberg has no native block to add a Lottie animation. Well, it actually has one. You can use the HTML block to add a Lottie animation. However, 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 start adding a Lottie animation, first, visit the LottieFiles website and pick a Lottie animation you like. On the appearing window, click the HTML icon on the Use this animation in section.
You will be directed to the page of the associated Lottie file after clicking the HTML icon above. From this page, 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.
Once done making the settings, scroll down to the GENERATED CODE section and copy the generated code.
Once the code is copied, open Gutenberg and add the HTML block. Simply paste the code you have just copied.
Method Two: Adding a Lottie Animation in Gutenberg Using a Third-Party Block
If you want to have more controls over the animation behavior, you can use a third-party Gutenberg block. Otter is one the plugins you can install. It offers a set of Gutenberg blocks, including the Lottie Animation block, which is dedicated to adding Lottie animation. The block allows you to add a Lottie animation from a direct link or by uploading the JSON file of the animation. You can control the trigger type (scroll, hover, click), enable/disable loop, set the animation speed, set the animation size and so on via the Gutenberg settings panel.
First and foremost, install the Otter plugin. You can get the plugin on the WordPress plugin directory. Once the plugin is installed and activated, go to the LottieFiles website and pick the animation you like. On the appearing window, copy the animation URL on the Lottie Animation URL section. Before copying the URL, you can set the animation background in case you want to change it.
Next, open Gutenberg and add the Lottie Animation block and paste the URL you have just copied. Or, if you want to add the animation from a JSON file, you can click the UPLOAD button to select the JSON file from your computer.
Once the animation is added, you can go to the Gutenberg settings panel to make the settings. To set the basic settings such as trigger type, animation speed, and animation width, you can open the Settings settings block.
While to set the entrance animation, you can open the Animations settings block.
The Bottom Line
Web creators used to use Flash to add animations to their websites. The problem with Flash is that it tends to heavy and have a massive contribution to make a web page takes longer to load. Then Lottie emerged in 2017, offered way lighter solution. Today, most web creators use Lottie when they need to add animations to their pages. Gutenberg has no native block dedicated to adding a Lottie animation, although you can use the HTML block. But it offers no setting option to control the animation behavior. You can’t even set the animation size. You can use a third-party block if you want to control the animation behavior.
