Block editor sites have come a long way from static pages and plain paragraphs. Patterns, full site editing, and reusable blocks let us build layouts that used to need a page builder. But one thing still trips people up: animation. Most Lottie tutorials assume you’re on Elementor or Divi, and that leaves a gap for anyone building a WordPress site purely in Gutenberg.
That gap is what we want to close here. We’ll walk through what a WordPress Lottie animation plugin needs to offer if it’s going to work well inside the block editor, compare three plugins that actually do the job, and show you where a small animation can lift an otherwise flat page. We’ll also point out where bBlocks fits into this picture, since we build blocks for a living and Lottie support is part of that toolkit.
Let’s get started.
Why Lottie Fits the Block Editor So Well
Lottie files are vector animations exported as JSON. They stay sharp at any screen size, weigh far less than a GIF or MP4, and can respond to scroll, hover, or a click. None of that is new information if you’ve read about Lottie before.
The bigger point is how naturally this format fits into a block-based workflow. You don’t write custom CSS or fight with a page builder’s animation panel. You add a block, drop in a file or a URL, and the block handles playback. That matches how Gutenberg already works: small, self-contained pieces you can move, duplicate, and reuse across patterns and templates.
For anyone running a full site editing theme, this matters even more. A Lottie block can live inside a template part, a synced pattern, or a query loop item. It carries its settings wherever you place it. That’s harder to pull off with animation tools built around a separate builder canvas.
What to Check Before You Pick a Lottie Plugin for Gutenberg
Not every Lottie plugin was built with the block editor in mind. Some started as Elementor add-ons and got a Gutenberg block bolted on later. Before you install anything, run through this short checklist.
- Native block, not a shortcode wrapper. A plugin that gives you a real Gutenberg block lets you use block-level tools like alignment, spacing, and duplication. A shortcode dropped into a Custom HTML block won’t give you the same control.
- File upload plus URL support. Some plugins only let you paste a LottieFiles link. Others let you upload your own .json or .lottie file. If you plan to use custom animations from a designer, upload support isn’t optional.
- Trigger options. Autoplay works for hero sections, but scroll and hover triggers matter more for storytelling layouts. Check whether the plugin supports both before committing.
- File size handling. Lottie files are small, but a busy homepage with five or six animations can still add weight. Look for plugins that don’t load extra libraries you’re not using.
- Caption and accessibility support. Alt text and captions help screen reader users understand what an animation represents. Not every plugin includes this, so check before you build a whole section around one tool.
With that checklist in mind, let’s look at three WordPress Lottie plugins that hold up well in the block editor.
3 WordPress Lottie Plugins Built to Work With Gutenberg
Quick Comparison
| Plugin | Native Gutenberg Block | Custom File Upload | Scroll Trigger | Best For |
| Lottie Player | Yes | Yes (Pro for both formats) | Yes | Custom animations, precise playback control |
| LottieFiles | Yes | Yes | Limited | Fast access to a free animation library |
| LottieFiles for Elementor | No (Elementor only) | Yes | Yes | Hybrid Elementor + Gutenberg sites |
Lottie Player
Lottie Player is a dedicated Gutenberg block for embedding Lottie animations across posts, pages, and template parts. It supports both .json and .lottie file formats, and you can upload a file directly or paste a link, so you’re not locked into one workflow.
The playback controls go deeper than most alternatives. You get autoplay, looping, hover triggers, scroll sync, and click-based playback, along with direction and repeat count settings for animations that need precise timing. Icon, tracker, and thumb colors are all adjustable too. That helps when you want the player controls to match your site’s color scheme instead of looking like a default embed.
For accessibility, the plugin supports captions below the player with their own typography and color settings, so you can label an animation without adding a separate text block next to it.
Where it fits best
- Sites that want scroll or click-triggered storytelling without writing JavaScript
- Anyone who needs to upload custom .lottie files instead of relying on a public library
- Template parts and patterns where consistent player styling matters
- Stores and landing pages where a link needs to sit on the animation itself
Where it falls short
Some of the deeper interactivity settings, like scroll sync and upload support for both file types, sit behind the pro version. The free version covers basic playback and controls, which is enough for a single hero animation but not for a page full of interactive triggers.
LottieFiles
The LottieFiles plugin connects your WordPress dashboard to the LottieFiles library directly, giving you access to a huge catalog of free animations without leaving the block editor. If you don’t have a designer creating custom Lottie files for you, this is the fastest way to find something usable.
The block integrates with your LottieFiles account, so animations you’ve saved or organized there show up ready to insert. You can also drag and drop your own JSON files, paste an external URL, or reuse animations you’ve already added to the Media Library. Playback settings cover background, speed, trigger type, and dimensions.
Where it fits best
- Bloggers and marketers who want animations without commissioning custom work
- Teams that already manage a LottieFiles account and want that library inside WordPress
- Product and feature explainer sections where a stock animation gets the point across
Where it falls short
Because it pulls from a shared public library, you’ll sometimes see the same animations on other sites. If your brand needs something distinct, upload a custom file instead of relying on the built-in catalog.
LottieFiles for Elementor
This plugin is worth mentioning even on a Gutenberg-focused list, because plenty of WordPress sites still run Elementor for landing pages while using the block editor for blog content. If that describes your setup, this plugin adds Lottie support to your Elementor widgets without touching code.
It supports JSON and Bodymovin animations, with triggers for scroll, hover, click, and mouse-over. Autoplay and inline playback are both available, and you get full control over speed, direction, and alignment inside the Elementor panel.
Where it fits best
- Hybrid sites running Elementor landing pages alongside a Gutenberg blog
- Designers who need scroll-triggered animation sequences for a sales page
Where it falls short
It only works inside Elementor’s canvas. If your goal is a pure block editor workflow, this plugin won’t help you outside pages built with Elementor.
Check also How to Add Lottie Animations to WordPress in Seconds (A Beginner-Friendly Guide)
A Quick Note From bBlocks
Since you’re reading this on the bBlocks blog, it’s worth mentioning that bBlocks ships its own Lottie Player Block as part of the plugin. If you’re already using bBlocks for other layout blocks like sliders, carousels, or post grids, you don’t need a separate plugin just to add Lottie support. The block sits alongside the other bBlocks tools in your Gutenberg inserter, so it fits into the same workflow you’re already using for the rest of your page.
This isn’t a push to drop a dedicated Lottie plugin if you need its deeper interactivity settings. If you’re building something that leans heavily on scroll sync and custom upload formats, Lottie Player from bPlugins still covers more ground. But for anyone who wants a quick animation inside a page built mostly with bBlocks, the built-in block saves you an extra plugin install.
Where Lottie Animations Fit Best in a Block-Built Site
Once you have a plugin installed, the harder question is where to actually use it. Here’s where Lottie tends to earn its place in a block editor layout.
- Cover block hero sections. Instead of a static hero image, a small looping animation in the corner of a Cover block adds motion without overwhelming the headline.
- Query loop icons. If you’re running a blog or a portfolio through the Query Loop block, a subtle animated icon next to each post type or category tag helps posts feel less uniform.
- Pricing and feature sections. A short animation next to a feature name, triggered on scroll, draws the eye down the page as visitors read through your offer.
- 404 and empty states. A Lottie animation on your 404 page or an empty search results template turns a dead end into something visitors actually remember.
- Loading states for dynamic blocks. If you’re pulling in content that takes a moment to load, a lightweight Lottie spinner feels more polished than a spinning icon font.
You don’t need all five. Pick one or two spots where motion actually supports what the visitor is trying to do, not just where it looks nice.
Keeping Your Lottie Animations From Hurting Core Web Vitals
Lottie files are lighter than video, but that doesn’t mean they’re free. If you’re not careful, animations can still drag down your Largest Contentful Paint or Cumulative Layout Shift scores.
- Set explicit width and height on the block. Animations that load without a defined size can cause the page to jump around as they render, which hurts your CLS score. Most Gutenberg Lottie blocks let you lock dimensions in the block settings.
- Avoid autoplay above the fold when it’s not essential. An animation racing to load and play the moment the page opens competes with your LCP element for bandwidth. Save autoplay for animations that are the actual focal point of the section.
- Lazy load anything below the fold. If your plugin supports lazy loading or scroll-triggered playback, use it. There’s no reason to load a footer animation before the visitor scrolls anywhere near it.
- Compress before you upload. Run your JSON files through a Lottie optimizer before uploading them to WordPress. A bloated animation file behaves the same as any other bloated asset on your page.
- Test with real device throttling. Chrome DevTools lets you simulate a slower connection. Load your page that way at least once before publishing, since animations that feel instant on a fast office connection can stutter on mobile data.
Learn How to Optimize Lottie Animation in WordPress Without Slowing Down Your Site.
Mistakes Site Owners Make With Lottie in the Block Editor
We see the same handful of mistakes come up again and again when people start adding Lottie animations to a Gutenberg site.
- Treating every icon as an animation opportunity. If everything moves, nothing stands out. Reserve motion for the two or three places on a page where it actually reinforces the message.
- Skipping alt text and captions. It’s easy to forget accessibility settings when you’re focused on getting the animation to play correctly. Add a caption or alt description every time, especially if the animation replaces information a static image would have conveyed.
- Ignoring mobile playback. An animation that looks great on a 27-inch monitor can look cramped or misaligned on a phone. Preview every animated section on a small screen before you publish.
- Mixing too many trigger types on one page. Scroll-triggered, hover-triggered, and autoplay animations all fighting for attention on the same page create a busy, distracting experience. Pick one trigger style per section and stay consistent.
- Not checking plugin conflicts. Caching and minification plugins occasionally interfere with Lottie scripts. If an animation stops playing after a site update, check your caching settings before assuming the Lottie plugin is broken.
Read also Lottie Animations vs GIFs: Which Works Best in WordPress?
FAQ
Can I use a Lottie animation inside a synced pattern?
Yes, as long as the plugin gives you a real Gutenberg block. Add the Lottie block inside your pattern, and every instance of that synced pattern across your site carries the same animation and settings.
Does adding Lottie animations affect my SEO?
Not directly, but page speed does factor into search rankings. Keep file sizes small, set explicit dimensions, and avoid autoplaying animations above the fold, and you shouldn’t see any negative impact.
Do I need coding knowledge to add Lottie animations in Gutenberg?
No. Both Lottie Player and the bBlocks Lottie Player Block work entirely through the block inserter and sidebar settings. You upload or link a file, then adjust playback options visually.
Can I use free LottieFiles animations commercially?
Many are licensed for commercial use, but licensing varies by animation. Always check the license on the specific file before using it on a client site or a commercial project.
What’s the difference between using a Lottie plugin and using bBlocks’ built-in Lottie block?
A dedicated plugin like Lottie Player usually offers more advanced controls, such as scroll sync and dual-format uploads. The bBlocks Lottie Player Block is a simpler option that’s convenient if you’re already using bBlocks for the rest of your layout and don’t need the extra interactivity settings.
Explore the 5 WordPress Post Grid Plugins Compared for Better Gutenberg Design Workflows.
Final Thoughts
Picking a WordPress Lottie animation plugin for a Gutenberg site comes down to matching the tool to how you actually build pages. If you want deep playback control and custom file uploads, Lottie Player gives you the most room to work with. If you just need quick access to a free animation library, LottieFiles gets you there faster. And if you’re already building with bBlocks, the built-in Lottie Player Block means you don’t have to add another plugin to your stack at all.
Whichever route you take, start small. Add one animation to a hero section or a feature list, check how it performs on mobile, and build from there. Motion should support your content, not compete with it.
Leave a Reply