Lottie Animation

The Lottie Animation module plays a Lottie animation on your page. Lottie files are small JSON files that describe vector animations. The module can load the file from your Media Library or from an external URL.

The animation library loads only on pages that use this module.

JSON in WordPress

WordPress does not accept JSON uploads by default. Divi Torque includes a switch for this. Go to Divi Torque > Settings > Permissions and turn on JSON / Lottie uploads. Then upload your Lottie file to the Media Library. Only upload files from sources you trust.

Content

Lottie

• Source: Media File or External URL. The default is Media File.
• External URL: The URL of a Lottie JSON file. Used when Source is External URL.
• Upload JSON File: The Lottie JSON file from your Media Library. Used when Source is Media File.
• Caption: None or Custom. The default is None.
• Custom Caption: The caption text, shown when Caption is Custom. The default text is "Caption". The caption appears only when Source is Media File.

Settings

• Trigger: When the animation plays. The default is None, which plays the animation as soon as it loads.
  • Viewport: Plays while the animation is fully visible on screen and pauses when it is not.
  • On Click: Restarts the animation each time the visitor clicks it.
  • On Hover: Restarts the animation when the pointer enters it and stops it when the pointer leaves.
• Loop: On by default. The animation repeats. Turn it off to play once.
• Play Speed (x): A speed multiplier. The default is 1.
• Renderer: SVG or Canvas. The default is SVG.

Design

Lottie

• Alignment: Left, Center or Right. The default is Center.
• Width: The default is 100%.
• Max Width: The default is 100%.
• Opacity: From 0 to 1. The default is 1.

Caption

Font settings for the caption text.