Bring interactive Lottie animation to WordPress

Embed Lottie Player Pro is a Gutenberg block for placing Lottie animations in posts, pages, and widgets. It supports both .json and .dotlottie (.lottie) files, giving you a practical way to add motion graphics without writing code. The Pro edition builds on the standard player with direct file uploads, expanded playback settings, interactive triggers, and a customizable caption area.

Use the block to add animated illustrations to landing pages, product websites, portfolios, agency websites, and other content where motion can support the message. The player can be sized and aligned within its container, while its controls can be adjusted to fit the surrounding design.

Pro playback controls

With Pro, you can upload both supported Lottie file formats directly to the player instead of embedding them through a file URL. You can also make an animation respond to a user’s actions or follow a specific playback pattern.

• Play an animation when the mouse hovers over the player.
• Choose playback modes and set the direction forward or backward.
• Specify how many times the animation should play.
• Adjust playback speed and define an interval between loops.
• Open an attached link in a new tab.

These settings are useful for controlling how an animation behaves in a hero area, product explanation, feature section, or interactive portfolio element. They also let you pick between a continuously repeating animation and a more deliberate, limited playback sequence.

Advanced interactivity

Pro includes several ways to connect playback with the page and the visitor. You can synchronize an animation with scrolling, use scroll movement relative to its container, or apply a scroll offset. Cursor-based settings can synchronize playback with cursor position or horizontal movement. You can also start playback on click or when the player becomes visible.

This makes it possible to use animation as part of an interaction rather than as a purely automatic visual. For example, a scroll-synchronized illustration can accompany a longer explanation, while click or visibility triggers can keep motion connected to the content around it.

Player appearance and captions

The block includes settings for the player width and left, center, or right alignment. You can display or hide player controls and style their height, background color, icon colors for normal, hover, and active states, tracker color, and thumb color.

Pro also includes a caption below the player. Caption settings include text alignment, typography, text and background colors, padding, and margin. This helps you provide supporting text while keeping the animation presentation consistent with the page layout.

Quick installation

1. Install and activate the Lottie Player block plugin.
2. Open the Gutenberg editor and add the Lottie Player block from the Widgets block category.
3. Upload a supported .json or .lottie file, or enter its file URL.
4. Configure playback, interactivity, layout, controls, and caption settings in the right-side settings sidebar.
5. Publish the post or page when the player is ready.

Embed Lottie Player Pro offers a focused workflow for adding configurable motion graphics to WordPress content, from simple animated visuals to scroll-, cursor-, click-, and visibility-driven experiences.