Lottie Player

3 min read Updated

The Lottie Player addon adds playback settings to the SiteOrigin Lottie Player widget. You can set the speed, the direction and the number of loops. You can also choose an animation mode that plays the animation when a visitor scrolls, clicks or hovers. For the widget’s other settings, see the Lottie Player widget documentation.

Requirements

Go to SiteOriginPremium Addons and activate Lottie Player. This also activates the Lottie Player widget.

Settings

Open a Lottie Player widget. The addon adds its settings at the bottom of the widget form, below Open in new window.

Count
The number of times the animation plays. It works only when Loop is enabled. For example, 3 plays the animation three times, then stops. Leave it empty to loop without end.

Direction
Forward or Backward. Shows only when Animation Mode is Normal. Default: Forward.

Speed
The playback speed. 1 is normal speed, 2 is twice as fast and 0.5 is half speed. An empty value or 0 plays at normal speed. Default: 1.

Animation Mode
How the animation plays. Default: Normal.

  • Normal: The animation plays with the widget’s Autoplay, Loop and Controls settings.
  • Bounce: The animation plays forward, then backward. With Loop enabled, it repeats.
  • Scroll: The animation moves forward as the visitor scrolls down the page, and backward as they scroll up.
  • Cursor Position: The animation follows the cursor as it moves over the animation.
  • Click: The animation plays once, from the start, each time the visitor clicks it.
  • Hover: The animation plays while the cursor is over it. When the cursor leaves, the animation stops and goes back to the start.
  • Toggle: The first click plays the animation. Each click after that plays it in the other direction.
  • Hold: The animation plays while the cursor is over it. When the cursor leaves, it plays backward.
  • Toggle Hold: The animation plays while the cursor is over it. When the cursor leaves, it pauses.
  • Visibility: The animation plays once when it scrolls into view.

Visibility Percentage
How much of the animation must be visible before it plays, from 0 to 50 percent. Shows only when Animation Mode is Visibility. Default: 0, which plays the animation as soon as it starts to enter the screen.

Notes

  • The widget’s Autoplay setting shows only in the Normal and Bounce modes. The other modes start the animation themselves.
  • The Destination URL link covers the animation. Leave Destination URL empty when you use Cursor Position, Click, Hover, Toggle, Hold or Toggle Hold, so that the animation gets the cursor and the clicks.
  • At the moment, when a page has two or more Lottie Player widgets that you duplicated or pasted in Page Builder, or that came from a prebuilt layout, only one of them may respond in the Scroll, Visibility, Cursor Position, Click, Toggle, Hold and Toggle Hold modes. To fix this, open each of these widgets and click Done.