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 (available in the Free version of Smart Slider too)
  • or follow the embedding tutorial of Lottie (only available in 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

Please note, that we do not support custom coding! Any customizations or error debugging with this method would have to be done by you!

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!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.