Brief Overview

The Lottie widget lets you add lightweight, scalable animations to Dynamic Layout ShoutOuts using Lottie JSON files. Lottie animations load quickly, scale without pixelation, and help enhance visual engagement without impacting performance.

This article explains how to add a Lottie animation to a ShoutOut, edit it, and configure playback settings.

How It Works

Lottie animations are JSON-based files hosted on LottieFiles. In the Visual Designer, you add a Lottie widget and link it to a hosted JSON animation, which then renders directly inside the ShoutOut.

Only JSON links generated from LottieFiles are supported in the Visual Designer.

Add a Lottie animation

To add a Lottie animation to a ShoutOut:

1. In the Visual Designer, select the + icon in the side menu
2. Select Lottie and drag it to the canvas
3. Select Change animation to open LottieFiles
   • If you do not have a LottieFiles account, create one for free
4. In LottieFiles, choose an animation and select Generate link
5. Choose the upload location to add the animation to your projects
6. Copy the JSON asset link that was generated
7. Paste the JSON link into the Paste a URL field in the Visual Designer

Configure playback settings

You can control how the animation plays from the property bag.

Playback options include:

• Play in a loop: Turn on to continuously play the Lottie animation
• Play speed: Set the playback speed, such as 1x, 1.5x, or 2x

A preview of the animation appears in the Visual Designer after the link is added.

Elevate your ShoutOut with Lottie animations

Edit Lottie animations

To edit a Lottie animation:

• Open the animation in the Lottie Editor

Technical Notes

• The Lottie widget is available only in the Dynamic Visual Designer
• Only the JSON link generated in LottieFiles works in the Visual Designer

Resources

To learn more about Lottie capabilities, refer to the following resources:

• What is a Lottie animation?
• Lottie Education Center
• Lottie FAQ & Support