How to insert Lottie animation into a slide?

To insert a Lottie animation into your slide, you should either:

• export your animation as a GIF file (can be used in the Free and Pro version of Smart Slider)
• or follow the embedding tutorial of Lottie (only can be used within the Pro version of Smart Slider).

Here you can see the steps within our system:

GIF file

Download your animation as a GIF file and just use it within an Image layer.

Embedding

Step 1

Call in the suggested JavaScript file within the HTML control, if it wasn't called in elsewhere into your website yet.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Step 2

Find the url of the animation.

Step 3

Add a Lottie player element to a HTML layer, just replace [INSERT STEP 2 URL HERE]:

<lottie-player src="[INSERT STEP 2 URL HERE]" background="transparent"  speed="1"  style="width: 100%; height: auto;" loop controls autoplay></lottie-player>

And you are done. In the admin area the player won't always work, due to how we have to load in codes and how this Lottie JavaScript code wants to run, but on the frontend it will be fine in the published slider!