Embed Lottie Player – bring your pages to life with animation
Add eye-catching Lottie motion graphics to any post, page, or widget – configure autoplay, looping, and interactivity in a few clicks, no code required.
Plugin Demo | Documentation | Get Pro Version
Why Embed Lottie Player?
Lottie animations are the modern way to add lightweight, crisp motion graphics to the web – and Embed Lottie Player makes using them in WordPress effortless. Embed any LottieFiles animation, .json, or .dotlottie file into posts, pages, and widgets with a dedicated Gutenberg block, then show your animation exactly the way you want.
The block is packed with options: show or hide player controls, enable autoplay and looping, attach a link, set the width, and align the player left, center, or right. You can even style the controls themselves – height, background color, icon colors, tracker, and thumb – to match your site.
The Pro version goes further with direct file uploads, hover interactions, playback modes, direction, play count, speed, and interval controls, plus advanced interactivity like scroll synchronization, cursor-driven playback, and click-triggered animations – and a fully styleable caption below the player.
Free Features
- JSON & dotLottie URLs: Enter both .json and .lottie file URLs to embed animations.
- Player Controls: Show controls so users can interact with the player.
- Autoplay: Start the animation automatically on load.
- Loop: Make the animation repeat seamlessly.
- Link: Add a link to the player so users can navigate to any URL.
- Width & Alignment: Set the player width and align it left, center, or right.
- Control Styling: Customize height, background color, icon colors (normal, hover, active), tracker color, and thumb color.
Pro Version
- Upload Files: Upload both .json and .lottie files directly to the Lottie Player.
- Hover: Play the animation when the mouse hovers over the player.
- Mode, Direction & Count: Choose playback modes, set forward/backward direction, and specify how many times the animation plays.
- Speed & Interval: Adjust playback speed and set an interval between loops.
- Open Link in New Tab: Send visitors to your link without leaving the page.
- Interactivity: Sync with scroll, scroll relative to the container, scroll with offset, sync with cursor position or horizontal movement, play on click, and play when visible.
- Caption & Caption Styles: Show a caption below the player and customize its text alignment, typography, colors (text and background), padding, and margin.
How to Use – Quick Start
- Install and activate the Lottie Player block plugin.
- In the Gutenberg editor, add the Lottie Player block from the “Widgets” block category.
- Paste your .json or .lottie file URL.
- Configure controls, autoplay, loop, link, width, and alignment from the right-side settings sidebar.
- Publish – your animation is live.
Use Cases
- Landing Pages: Replace static hero images with lightweight animated illustrations.
- Product Sites: Explain features with looping micro-animations.
- Portfolios & Agencies: Add polished motion design that loads fast.
- Blogs & Docs: Illustrate steps and concepts with animated visuals.
User Feedback
⭐⭐⭐⭐⭐ Perfecto
❛❛Genial para meter animaciones lottie❜❜
⭐⭐⭐⭐⭐ Amazing Plugin!
❛❛This is a fantastic plugin to configure Lottie Animations. Simple and easy to use but still very customizable. The support team helped me a lot while i built my site. Thank you very much guys❜❜
⭐⭐⭐⭐⭐ Recommended
❛❛Currently, we have little choice when we need to embed a Lottie animation into a WordPress website built with the block editor. Luckily, this plugin is far above average and offers many options to finetune your animation.
(Tip: You can even use it to embed a Lottie animation with the Divi builder – simply create a sidebar, insert the animation there, and then bring it into your page using Divi’s sidebar module.)❜❜
Did you like this plugin? Have a feature request? Please share your feedback with us.
Check out the Parent Plugin of this plugin-
B Blocks – A blocks collection and page building tool for Gutenberg.
Check out our other WordPress Plugins-
Html5 Video Player – Display videos as single and playlist in multiple skins.
PDF Poster – Display/Embed PDF files with different styles.
Html5 Audio Player – Listen audios with awesome visuals.
StreamCast – Customizable radio player with different skins.
3D Viewer – Embed 3D models and 3D products with interaction.
Advanced Post Block – Show posts and custom posts in different layouts.
Blocks
This plugin provides 1 block.
Lottie Player – Lottie player for display lottie files.
Source Code
You can find the source code, report bugs, and contribute to the development of this plugin on our GitHub repository: Embed Lottie Player on GitHub
Third-Party Libraries
This plugin bundles the following third-party JavaScript/PHP libraries.
@dotlottie/player-component
- Source: https://www.npmjs.com/package/@dotlottie/player-component
- GitHub: https://github.com/dotlottie/player-component
- License: MIT – https://github.com/dotlottie/player-component/blob/master/LICENSE
- Purpose: Web component used to render and play dotLottie animations in the editor and front end.
@lottiefiles/lottie-interactivity
- Source: https://www.npmjs.com/package/@lottiefiles/lottie-interactivity
- GitHub: https://github.com/LottieFiles/lottie-interactivity
- License: MIT – https://github.com/LottieFiles/lottie-interactivity/blob/master/LICENSE
- Purpose: Adds scroll and cursor interactivity to Lottie animations.
Freemius Lite SDK
- Source: https://bplugins.com/
- GitHub: https://github.com/bPlugins/freemius-lite-sdk
- License: GPL-2.0-or-later – https://www.gnu.org/licenses/gpl-2.0.html
- Purpose: Provides an opt-in consent form for usage tracking and analytics to help improve the plugin. No data is sent before explicit user consent.
- External Services: Communicates with
api.bplugins.com(activation events) andwp.freemius.com(opt-in processing) only after user opt-in. See bPlugins Privacy Policy and Freemius Privacy Policy.
bpl-tools
- Source / GitHub: https://github.com/bPlugins/bpl-tools
- License: GPL-2.0-or-later – https://www.gnu.org/licenses/gpl-2.0.html
- Purpose: Shared utility library providing admin dashboard components and common Gutenberg editor controls.
- External Services: The library may connect to bPlugins, WordPress.org, and Freemius services for product data and checkout functionality. See full details: https://github.com/bPlugins/bpl-tools#external-requests–why-they-are-made