How To Use The Lottie Image Widget By Atomic Addons

The Lottie Image widget by Atomic Addons plays a Lottie animation: a lightweight vector animation saved as a JSON file, such as the ones on LottieFiles. You can start it when the page loads or when it scrolls into view, play only part of it, change its speed and link it to another page. This guide covers adding the widget, loading an animation and the playback settings.

Enable the Lottie Image Widget

Lottie Image is a Free widget and works with the free Atomic Addons plugin. A few of its settings carry a Pro badge and need Atomic Addons Pro; they are marked below. Switch the widget on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Lottie Image. You can also open the Creative category.

4. 4

   Turn the Lottie Image widget on.

5. 5

   Click Save Settings.

Add the Lottie Image Widget

Lottie Image works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Lottie Image. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Lottie Image

Open the widget and go to Content → Lottie Image:

1. 1

   Select JSON Source: Load From URL, the default, loads the animation from a JSON file's address. Custom JSON Code takes the animation's code pasted in.

2. 2

   Lottie JSON URL: Load From URL: the address of the .json file. It starts with a sample teamwork animation that ships with the plugin. The file has to be reachable from your site, so a file in your own Media Library or a direct file link works; a LottieFiles page address does not.

3. 3

   Paste JSON Code: Custom JSON Code: paste the whole content of the JSON file here. Pro badge.

4. 4

   Alignment: Left, center or right, per screen size.

5. 5

   Caption: None, the default, or Custom, which adds a caption under the animation.

6. 6

   Custom Caption: Custom only: the caption text. Pro badge.

7. 7

   Link: None, the default, or Custom URL, which adds a field for the address and makes the animation a link.

Additional Settings

Content → Additional Settings decides when and how the animation plays:

1. 1

   Play Action: Auto Play, the default, plays the animation as soon as it has loaded. Play on Hover plays it when the visitor points at it, Play on Click when they click it, Play on Hover Column when they point at the column or container around it, and Play on Hover Section when they point at the section around it. None shows the first frame and never plays. Pro badge: the free plugin uses Auto Play.

2. 2

   Start When: Page Loaded, the default, loads the animation with the page. When Scroll waits until the widget scrolls into view, so an animation further down the page starts when visitors reach it.

3. 3

   Loop: Repeats the animation. Off by default, so it plays once. Pro badge.

4. 4

   Times: Loop only: limits how many times the animation plays. Leave it empty to loop without end.

5. 5

   Play Speed: From 0.1 to 5, where 1 (the default) is the animation's own speed and 2 twice as fast.

6. 6

   Start Point: Where playback begins, as a percentage of the animation: 0% by default.

7. 7

   End Point: Where playback ends: 100% by default. Use the two points to play only part of an animation.

8. 8

   Renderer: SVG, the default, or Canvas, which can run faster for complex animations. Pro badge.

Style the Lottie Image

Everything below is on the Style tab:

• Lottie: the width and maximum width of the animation, its opacity in Normal and Hover tabs, the transition duration between them, and border radius. The width settings size the SVG renderer.
• Caption: shown while the caption is Custom. Alignment, text color, background color, padding, typography and the space above the caption.