Embed Lottie Player Pro

Embed Lottie Player Pro extends the Lottie Player Gutenberg block for animations in WordPress posts, pages, widgets, and shortcode-compatible areas. The standard player uses a file URL for .json or .lottie animations; Pro also lets you upload either format directly.

Playback settings and triggers

The standard player supports autoplay, looping, visible or hidden controls, and an attached link. Pro includes playback on hover, playback modes, forward or backward direction, a play count, playback speed, and an interval between loops. When a link is attached, Pro can open it in a new tab.

Pro can synchronize playback with page scrolling, including movement relative to the player container or with a scroll offset. Cursor options can follow cursor position or horizontal movement. Playback can also start on click or when the player becomes visible.

Player layout, controls, and captions

Set the player width and align it left, center, or right. Control styling includes height, background color, icon colors for normal, hover, and active states, tracker color, and thumb color.

Pro includes a caption below the player. Its settings cover text alignment and typography, text and background colors, padding, and margin.

Adding an animation

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

Use the block for animated illustrations in landing pages, product explanations, portfolios, blogs, or documentation. Its playback options let you choose whether an animation starts automatically, repeats, or responds to scrolling, cursor movement, a click, or visibility.