Lottie Player

3 min read Updated

The Lottie Player Widget plays a Lottie animation on your page. Lottie animations are small JSON files that stay sharp at any size. Find out more about Lottie on the LottieFiles website.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets and activate the Lottie Player Widget.

You can use the Lottie Player Widget anywhere:

Page Builder: Insert the widget in Page Builder by SiteOrigin, in the Classic Editor or in the Page Builder Layout Block.
Block Editor: Insert the SiteOrigin Lottie Player block. You will find it in the SiteOrigin category.
Theme and Plugin Widget Areas: Insert the widget into any theme or plugin widget area.

Settings

The Lottie Player widget form

Lottie File
The Lottie JSON file. Click Choose Media to upload the file or select it from the Media Library. Some servers refuse .json uploads with the message “Sorry, you are not allowed to upload this file type.” If no file is set, the widget shows “Unable to display Lottie Player.”

Autoplay
Plays the animation when the page loads. Disabled by default.

Controls
Shows the player controls below the animation. Enabled by default.

Loop
Plays the animation again when it ends. Enabled by default.

Destination URL
Links the animation to a URL. Enter a URL, or use the Select Content button to find a post or page on your site. The link covers the animation but not the controls.

Open in new window
Opens the Destination URL in a new tab or window. Disabled by default.

A Lottie animation with player controls on the front end

SiteOrigin Premium

The Lottie Player Addon in SiteOrigin Premium adds these settings:

Count
The number of times to loop the animation.

Direction
Forward or Backward. Forward is selected by default. This setting shows only in the Normal animation mode.

Speed
The animation speed. 1 is normal speed. Default: 1.

Animation Mode
How the animation plays. Default: Normal. The options are:

  • Normal: The animation plays with the settings above.
  • Bounce: The animation plays forward, then backward.
  • Scroll: The animation moves forward and back as the visitor scrolls the page.
  • Cursor Position: The animation follows the cursor as it moves over the player.
  • Click: The animation plays when the visitor clicks it.
  • Hover: The animation plays when the visitor hovers over it.
  • Toggle: Each click plays or reverses the animation.
  • Hold: The animation plays while the visitor holds the cursor on it, and reverses when the cursor leaves.
  • Toggle Hold: The animation plays while the visitor holds the cursor on it, and pauses when the cursor leaves.
  • Visibility: The animation plays when it scrolls into view.

Visibility Percentage
How much of the animation, from 0 to 50 percent, must be visible before it plays. Default: 0, which plays the animation as soon as it starts to enter the screen. This setting shows only in the Visibility mode.

The Autoplay setting shows only in the Normal and Bounce modes.

The Destination URL link sits on top of the animation. Leave Destination URL empty when you use the Cursor Position, Click, Hover, Toggle, Hold or Toggle Hold mode, so that the animation receives the cursor and clicks.