Lottie animations allow you to add lightweight, scalable animations to your website without relying on large video files or GIFs. Because they are based on vector graphics, Lottie animations remain sharp on all screen sizes and typically load faster than traditional animated formats.
This article explains how to install the LottieFiles plugin and add a Lottie animation to a WordPress page or post.
Table of Contents
What Are Lottie Animations?
Lottie is a JSON-based animation format that enables animations to be displayed directly in web browsers and applications.
Compared to animated GIFs, Lottie animations generally offer:
- Smaller file sizes
- Better image quality
- Smooth scaling on different screen sizes
- Faster loading times
Lottie animations are commonly used for:
- Website illustrations
- Loading animations
- Interactive elements
- Marketing and promotional content
Step 1: Install the LottieFiles Plugin
Log in to the WordPress administration panel.
From the left-hand menu, navigate to:
Plugins → Add New
In the search field, enter:
LottieFiles
Locate the LottieFiles plugin in the search results and click Install Now.
After the installation is complete, click Activate.
Step 2: Connect or Create a LottieFiles Account
The first time you use the plugin, you may be prompted to sign in to a LottieFiles account or create a new one.
Creating a LottieFiles account is free.
After completing the sign-in process, you can return to the WordPress administration panel.
Step 3: Add a Lottie Animation to a Page or Post
Open an existing page or post, or create a new one using the Gutenberg editor.
Click the + button to add a new block.
In the search field, enter:
Lottie
Select the Lottie block from the results.
Step 4: Choose an Animation
After adding the block, you can either:
- Upload your own Lottie animation file
- Browse the LottieFiles animation library
To browse available animations, click Discover Animations.
A library of featured and popular animations will open. You can also use the search function to find specific animation styles or themes.
When you find an animation you want to use, hover over it and click Insert Animation.
The animation will be added directly to your page or post.
What to Expect
Once inserted, the animation can be positioned and configured like any other Gutenberg block.
Depending on the plugin version, you may also have access to additional settings such as:
- Autoplay
- Looping
- Playback speed
- Alignment and sizing
Preview the page before publishing to ensure the animation displays correctly on desktop and mobile devices.
Summary
Lottie animations provide a lightweight way to add motion and visual interest to a WordPress website. Using the LottieFiles plugin, you can browse a library of animations or upload your own and add them directly to pages and posts through the Gutenberg editor.