Website animations meant slow load times and choppy playback, forcing you to choose between compressed GIFs that looked terrible or massive video files that sent visitors running.
Lottie changed that dynamic. These tiny JSON-based motion graphics scale to any screen size without losing quality and play smoother than GIFs ever could. The only problem is WordPress hasn’t quite caught up yet, so adding them takes a few extra steps.
We’ll show you exactly how to get Lottie files working on your WordPress site and explain the shortcut that Divi 5 offers.
What Are Lottie Files?
Lottie files are JSON-based animations that store motion graphics as code instead of pixels. Introduced by Airbnb engineers in 2017, they solved web animation’s biggest problem: file size. A complex animation that would be 5MB as a video becomes just 50KB as a Lottie.
You can create these in After Effects and export using the Bodymovin or the LottieFiles plugin. The plugin converts your layers and keyframes into text-based instructions. When browsers load this JSON file, they read the math and draw the animation in real time.
Since it’s vector math rather than pixels, the same file scales perfectly from phone screens to 4K displays without quality loss.
How Lottie Files Work
Lottie files are JSON documents that describe layers, shapes, and keyframes. A Lottie JSON file is like a recipe for animations. At the top, you find the basics: frame rate, duration, width, and height. Under that is an array of layers. Each layer has position, rotation, scale, and opacity, with keyframes that tell when and how to change.
A Lottie file describes motion mathematically, not as images. The player calculates intermediate frames on the fly, so motion stays smooth at any device frame rate. Shape layers can contain groups of paths, fills, strokes, and transforms. Attributes like color (RGBA arrays), stroke width, and opacity are stored as numeric values.
Lottie Beats GIFs Every Time
Traditional formats like GIF save every pixel of every frame. A 30-second animation at 30 fps has 900 images with thousands of pixels, so GIFs grow large quickly because they store frame-by-frame raster images with a 256-color palette.
A simple bouncing animation can be 3 MB. GIFs only support 256 colors, so gradients look banded. Transparency is either fully transparent or fully opaque, so edges look rough.
Lottie uses vectors. The browser reads values and draws each frame from them. A moving circle is not 500 images, but one circle with changing coordinates. This keeps files small and allows infinite scaling. The files are readable and easy to edit.
With vectors, quality stays perfect at any size. Scaling a GIF makes it blocky because it uses raster images, while scaling a Lottie keeps edges sharp, thanks to vectors. The same small file on mobile can be displayed without changes on a 4K screen. File compression becomes matters less since there’s nothing to compress beyond minimal text data.
Lottie renders vector shapes with full-color gradients and alpha transparency via the player. Subtle shadows render with smooth fades from 0 percent to 100 percent opacity.
Gradients stay smooth instead of turning into color bands. Every shade and tint exports exactly as designed in After Effects, whether it is a soft glow effect or a complex color transition.
Why Your WordPress Site Needs Lottie Files
Your WordPress site already works well, but visitors expect more than text and images. They want visual cues that guide them through content, and small touches that make browsing feel responsive. Lottie files deliver this without the technical overhead.
Lottie files can be customized to create hover effects on service cards, animated clickable icons that can replace plain buttons, or animations in testimonials. These create micro-interactions that keep visitors engaged. These small moments add up to a site that feels thoughtfully crafted.
Budget matters too. Professional animations typically run $200-500 per custom piece. Lottie libraries provide thousands of customizable options for free or at a fraction of that cost. You get broadcast-quality motion graphics that would typically require an agency budget.
Where To Find Lottie Files
Speaking of, while you can obviously create your own Lottie files using Adobe After Effects, it makes much more practical sense to use readymade options available in the market, for it is convenient and, more importantly, doesn’t require much technical skills. Here are some of the ubiquitous options available to source your Lottie files:
LottieFiles
The original Lottie marketplace hosts over 800,000 free animations from thousands of designers. You’ll need an account to download, but the library covers everything from loading spinners to complex character animations. The built-in editor lets you adjust colors and speed before downloading.
It also offers Lottie Creator, which lets you build them in your browser. The AI Motion Copilot generates keyframes from text descriptions. You can import SVGs and add motion without knowing After Effects.
IconScout
With 700K+ Lottie files, IconScout bridges the gap between free and premium content. The platform shines with its direct plugins for Figma and WordPress. You get 2,167 free animations without attribution requirements. Their converter tools handle batch processing between formats, making it practical for agencies managing multiple client projects.
Creattie
Creattie focuses on consistency over quantity. Each animation follows strict quality standards, and collections share the same visual style. The free tier offers hundreds of designs without requiring credit card details. Their strength lies in industry-specific packs.
Lordicon
Purely for animated icons, Lordicon delivers 37,200 options across different styles. The platform excels at UI elements: checkboxes, toggles, navigation arrows, and social media icons. Free users access 1,490 icons. The editor supports basic color changes and stroke adjustments.
How To Add Lottie To WordPress
Now that we have established why you need Lottie animations for your site, let’s examine how to add them to your WordPress website. It doesn’t support Lottie files natively, so here are a few approaches you can use:
Using HTML Code
Adding Lottie files with HTML has the least overhead but needs more technical skill.
The steps are more or less the same across providers, with some variation. With LottieFiles: pick an animation, save it to your library, go to Embed, and copy the code from the “Embed HTML” tab.
In WordPress, add a Custom HTML block in Gutenberg and paste the code. You can change size, speed, and loop in the code attributes.
This method works with any page builder that accepts custom HTML.
Using A Lottie Plugin
Lottie plugins add Lottie features to WordPress via blocks or modules. There’s an official LottieFiles plugin
and others like AM LottiePlayer and Lottie Player.
Some Gutenberg add-on plugins also include Lottie blocks. Spectra (formerly Ultimate Addons for Gutenberg) has a Lottie animation block among its 30+ blocks. Otter Blocks includes Lottie in its 20+ block library. These work in the standard WordPress editor.
The process is similar across plugins: install the plugin, then search for “Lottie” in the block inserter. Some options only let you search, upload files, or paste URLs, and others do all.
Most plugins offer basic controls for background, size, triggers, colors, and more.
Why These Methods Fall Short
However, there are several downsides to both of these methods.
Where HTML Method Falls Short
Because Gutenberg does not show the animation in the editor, you must preview the page, tweak the settings, and repeat until it looks right. Moreover, animations are placed in separate HTML blocks across the site, so managing them feels scattered, and updating one means hunting for the right block.
In addition, they rely on external services, so any downtime can break them all at once. Consequently, even small changes like a background color force you to edit raw HTML, which increases the risk of errors from nontechnical team members.
Many animations load the Lottie script multiple times if you are not properly optimizing it, which adds page weight. Finally, you can’t adjust the size, animations, and more on mobiles without requiring extra CSS.
Why Using A Lottie Plugin Isn’t Ideal Either
While the plugin method is more usable than HTML blocks, it might bring in extra problems.
Most plugins lock good features behind a paywall. This is an additional fee on top of what you already pay if you use premium Lottie files. Plugins also slow down WordPress by adding unnecessary code. They load extra files on every page, even when animations aren’t present.
The LottieFiles plugin has a number of recent reviews citing critical errors and admin performance issues — evaluate carefully in staging first.
The plugin loads tons of CSS code into WordPress admin areas and pulls files from outside servers. Many people say it crashed their entire website after they installed it.
More importantly, no matter which plugin you choose, Gutenberg makes using animated graphics difficult. Simple changes become slow and annoying; the whole experience might feel clunky and broken.
That’s why having a Lottie module inside a dedicated page builder is a far superior option. Page builders treat Lottie files like any other design element. Drop them in, adjust the settings on screen, and move on. The animation controls sit right next to your typography and layout options, where they belong.
You only pay for the page builder, instead of separate plugins that break your site or force you to jump between different interfaces. Divi 5 integrates Lottie as a first-class module inside the Visual Builder, so animation controls live alongside your layout and typography.
Divi 5 Makes Lottie Files (And WordPress Design) Actually Simple
Divi runs on millions of WordPress sites, not as a theme, but as a complete design system. We built it for anyone who needs professional websites without touching code.
You see your page exactly as visitors will while you edit. Select text, swap colors, or rearrange entire sections, and watch the changes happen immediately. There is no back-and-forth between editing screens and preview modes.
The platform comes loaded with more than 200 content modules ready to use. These include basic text blocks and image galleries as well as advanced pricing tables, testimonials, and contact forms.
Divi 5 Is Made For The Future Of WordPress
After two and a half years of development, Divi 5 alpha arrived with completely new code. The original framework couldn’t support what we wanted to build next, so every module and interaction got rewritten.
This fresh foundation connects directly with modern WordPress capabilities. The payoff shows everywhere: responsive designs that work, layouts that snap together faster, and styling options the old architecture couldn’t handle. We didn’t patch what existed. We started over to build something more substantial.
A Lot Has Changed In Divi 5
- The Lottie module loads JSON animation files and gives you controls for playback speed, triggers, and color adjustments without any coding. Other new inclusions are Group Carousel, which creates sliders from any content type, and Icon List, which creates custom bullet point designs.
- Design Variables let you define colors, fonts, and spacing values once. When you change them, they automatically update across your entire website.
- HSL color controls calculate color relationships mathematically, so your whole palette shifts proportionally when you modify base colors.
- The Responsive Editor displays how animations and settings behave on different screen sizes, during hover states, and with sticky positioning.
- Flexbox replaced the old layout system, and you can nest rows inside other rows as many levels deep as you need.
- Built-in interactions handle popups, mouse hover effects, scroll-based animations, and toggle switches without requiring additional plugins.
- Through visual controls, you can use advanced CSS units, including clamp(), calc(), REM, and viewport widths, without writing code.
- The new codebase abandoned shortcodes for WordPress’s block format and only loads the modules each specific page uses.
- The interface includes panels that can be docked anywhere, tabbed settings organization, breadcrumb navigation, keyboard shortcuts, and a dark mode option.
- Option Group Presets let you save combinations of typography, borders, shadows, and backgrounds to apply across multiple elements.
- The Loop Builder displays dynamic content from custom post types, ACF fields, WooCommerce products, and repeater fields.
Add Lottie To Divi In 3 Steps
Adding Lottie animations to Divi 5 takes three steps. That’s it. No code snippets to paste, no plugin compatibility issues to debug, no external scripts to load. The Visual Builder handles everything internally, treating animations like any other module you’d drop onto a page. You get the same controls, the same workflow, the same instant preview. Here’s exactly how to set it up.
1. Enable JSON Uploads & Add Your Lottie JSON
First, grab your JSON file. Go to LottieFiles, IconScout, or any source covered earlier. Find an animation you like. Click download and select JSON format, not the Lottie Web Player option.
Most sites allow you to pick colors and sizes before downloading. Do that now since you can’t change colors inside Divi later.
WordPress blocks JSON files by default because it sees them as security risks. The fix takes two minutes using a plugin like File Upload Types. But always remember to get your JSON files from trusted sites.
Now you can add Lottie files. Open any page in Divi’s Visual Builder. Click the gray plus icon where you want movement. Find the Lottie module in the list and add it to your page.
Then, in the Lottie animations tab, click on upload and upload your JSON file like any image. You can also pick one you uploaded before. The file will show up with a document icon. Select it.
The Lottie file has now been added to your Divi 5 page.
2. Adjust Animation And Style
Once your animation loads, the settings panel shows your control options. Trigger Animation decides when motion starts. On Load plays it right away. View waits until the section enters the viewport. Hover responds to mouse movement. Click makes it tap-activated.
Scroll to Animate ties animation frames to scroll position, so users control playback by scrolling. This last one creates the most engaging effect: scroll down and the animation moves forward, scroll up and reverses.
The Loop Animation toggle keeps it running forever. Turn it off for entrance animations that should play once and stop.
Animation Speed defaults to 1 for normal playback. Set it to 0.5 for half speed or crank it to 2 for double speed. Direction runs it forward or backward. Play Mode gives you Normal or Bounce, where Bounce plays forward, then reverses back to the start.
The Design tab opens up Divi 5’s real power. You get the advanced units field instead of basic sliders. Type 100vw to make your animation fill the screen minus some padding.
Use clamp(25px, 3vw, 50px) so it scales smoothly between mobile and desktop. These CSS functions work directly in the input fields, so no custom code is needed. You can also pull in the Number Design Variables you’ve created. This ensures that your Lottie file uses consistent values whenever needed.
Plus, it stays connected to a system, so when you update your Lottie size design variable, it automatically updates every Lottie file that references this Number variable.
Adjust Settings For Different Screen Sizes
Large animations can work on desktops, but overwhelm mobile users. In Divi’s Visual Builder, open the mobile view using the responsive editor and cut the animation size to whatever looks best.
You can also use clamp() and similar units to reduce the need for per-breakpoint adjustments.
Detailed animations on big screens are complex to see on small ones. Simplify the motion or slow it from 1 to 0.5 on mobile. Hover effects do not work on touchscreens, so change those triggers to “View” so the animation starts when the section scrolls into view.
Divi 5 lets you use up to seven responsive breakpoints instead of just three. You can switch between breakpoints to test animations and tweak them quickly.
3. Create Presets For Reusing It Across The Website
After setting up your Lottie animation exactly how you want it, save those settings for reuse across your site. Divi 5 splits this into two preset types.
Option Group Presets let you save specific style groups. For example, you might save the sizing values, or you can save whatever works for your layout. You can save it through the preset icon next to that setting group.
Name it something obvious like “Lottie Size”. These presets work across any module type. The exact spacing you created for your Lottie animation applies to images, text blocks, buttons, and anything. When you need those settings again, click the preset icon in any module and select your saved preset.
Element Presets save the whole setup. Everything gets packaged together with the trigger settings, animation speed, loop status, and all the design properties, including sizes.
Hit the preset icon at the top left of the settings panel to save your complete Lottie module as an Element Preset. With one click, you can drop that exact animation anywhere on your site.
Then, when you update the preset, change the animation speed from 1 to 0.5 in the preset, and every instance of that animation across your entire site slows down automatically. You edit once, and the change flows everywhere that preset appears.
Try Lottie Animations In Divi 5 Today
Adding Lottie files shouldn’t require plugin gambling or HTML wrestling. Divi 5 includes Lottie support in the Visual Builder, sitting next to Design Variables for consistent colors, Flexbox layouts that work, and built-in interactions for hover effects.
You upload JSON files the same way you would add any image. The Responsive Editor shows how your animations look on phones while you’re still editing on the desktop.
When everything connects through one system instead of five different plugins, your site stays fast and your sanity stays intact.
Leave A Reply