How to Add Lottie Animations in WordPress (4 Simple Steps)

Using Lottie animations in WordPress can be a great way to spruce up your pages. They’re typically lightweight and customizable, and can therefore help you create engaging content without harming your user experience (UX). However, you may be looking for a stress-free way to add them to your site.

Fortunately, the process is easier than you might think. 🦸 By using a plugin like Otter Blocks, you can add and customize your Lottie animations with just a few clicks. You’ll also be able to set visibility conditions so they play at the right time.

An introduction to Lottie animations

Lottie is an open-source file format for web animations. It enables you to create custom animations for your brand and use them on your website:

Of course, you can always opt for GIFs, but these files can weigh down your site. Lottie animations are much smaller than GIFs. Therefore, they can help you make your site more interesting while preserving your UX and delivering fast loading times.

Additionally, Lottie animations come with a lot of customization options. The library itself is extensive, providing access to thousands of elements, characters, and illustrations. However, you’re also able to swap out colors, change the display settings, and add visibility conditions.

⌛ Custom animations can help you impress your visitors. Plus, they can make your site look fresh and unique.

How to add Lottie animations to WordPress (in 4 steps)

Now that you know a bit more about Lottie Animations, let’s look at how to add them to your WordPress website:

Step 1: Install and activate Otter Blocks

There are many ways to add Lottie animations in WordPress. For instance, you can use HTML and JavaScript. However, this method can be fairly complex.

Alternatively, you can use the Lottie animations plugin, although this may not be compatible with all page builders. Plus, it doesn’t offer many stylistic options.

The easiest way to add Lottie Animations to your site is with a plugin like Otter Blocks:

This plugin adds new content blocks and templates to your site, including a block for Lottie animations. It also expands the functionality of the Block Editor with custom CSS, animations, visibility conditions, and more. Therefore, it helps you design your pages more efficiently and reduces the need for page builders.

If you upgrade to Otter Blocks Pro, you’ll get access to advanced features like special WooCommerce blocks and additional stylistic settings. However, you don’t need the Pro version to use the Lottie animations feature.

If you want to use the free version, head to Plugins > Add New in your WordPress dashboard and search for “Otter Blocks:”

Then, click on Install > Activate. You should now see a selection of new blocks in the Block Editor.

Step 2: Choose an animation from the Lottie library

Now that you’ve got Otter Blocks set up on your website, you can head to the Lottie library to choose an animation. To access the designs, you’ll need to create a free account.

Once you’ve created your profile, navigate to Discover and select Free Ready-to-use Animations:

Here, you can browse through a library of Lottie elements that can be used on websites, applications, and social media:

When you find an animation that you want to use, click on the design. A pop-up will appear where you can make some changes to the appearance of the animation:

For example, you can adjust the animation speed and change the background color. If you click on Edit Layer Colors, you’ll be taken to the Lottie Editor:

Here, you can customize the color of any part of the design. Simply click on a section of the element that you’d like to change, go to All colors and use the color picker to apply a new tone:

If you make a change that you don’t like, click on the Undo arrow on the top left of the screen.

Step 3: Paste the Lottie animation URL into your Otter Block or upload the Lottie file

Once you’re happy with your design, you have two options to add it to WordPress:

1. You can copy the Lottie Animation URL to add the version from LottieFiles’ server to your site. You’ll find this in your animation pop-up, just below the design.
2. You can download the finished LottieFile to your computer by clicking the Download button in the top-right corner and selecting the dotLottie format. This will let you host the file on your server.

Then, return to your WordPress site and open the page or post where you want to insert your animation.

Click to add a new block and search for “Lottie Animations:”

Add the block to your page. Then, choose one of these options:

• Insert from URL – use this if you want to enter the link to the Lottie file on LottieFiles’ servers. All you need to do is paste in the Lottie Animation URL link that you copied from the LottieFiles website.
• Upload – use this if you downloaded the actual dotLottie file from LottieFiles. You can then upload that file to your WordPress site.

Next, hit Enter and the animation will appear on the page:

You can now save your changes and move on to the final step.

Step 4: Customize your animation with Otter Blocks

Now that you’ve added your Lottie animations in WordPress, you’re ready to customize the design and layout. In the Block settings, you’ll see a selection of display options.

Under TRIGGER, you can choose between autoplay, scroll, hover, or click. The animation won’t play until one of these actions is completed on the page:

You also have the option to toggle the animation to play on loop. Plus, you can adjust the speed of your animation using the slider, reverse the direction, and change the width of the design.

If you want to change the background color, click on the Background tab. Here, you can select one of the default Solid options, use the color picker, or choose a gradient background:

If you head to Visibility Conditions, you’ll be able to configure your animation to only appear in certain circumstances:

For instance, you might want the block to be visible to logged-in users only, or to be displayed on a specific date. To do this, click on Add Rule Group. Then, select the arrow to open the settings:

Under CONDITION, use the dropdown menu to configure your visibility settings. You can add more than one condition and create additional rule groups.

Get started with Lottie animations in WordPress

To recap, here are four steps to add Lottie animations in WordPress:

👉 For even more ways to improve the native WordPress editor, you can check out our full collection of the best WordPress block plugins.

Do you have any questions about adding Lottie Animations in WordPress? Let us know in the comments section below!