How can I embed a Lottie animation?

#1

Hi guys

I need to embed a Lottie animation in a file.
I know that there is an option to add a plugin to axshare publish, but I don’t plan to publish my RP to axshare. I need it to to be a local file.
I also know that I can add the script manually to the exported HTML file, and it worked indeed, but I need that the javascript will be injected in the RP file itself.

Attached my poor attempt to convert the script I got from lottiefiles.com to something that will work in Axure.

HowToEmbedLottie.rp (53.5 KB)

Thanks in advance :pray::pray:

#2

Hello, it is an interesting alternative with https://lottiefiles.com/lottie-to-gif, which converts the Lottie json file to gif, so you just have to have the json file of your Lottie animation and you can easily convert it in gif and then use it in your RP file

Lottie-Gif.rp (321.0 KB)

Capture
Capture.PNG1058×905 29.1 KB

#3

Thanks a lot Serge!
I was sceptical a gif file file will look good, but this convertor does a a really great job.
I am still interested in knowing how to add the original Lottie, because this may allow to control the parameters of the animation (like size, speed, background). I think this should be possible using javascript, but unfortunately I couldn’t make it happen yet.

#4

I am happy to share that I figured it out (with a little help of ChatGPT that debugged my code :sweat_smile:). I created a file with a code generator - simply paste the URL of the Lottie file from lottiefile.com, and get the script.
There are also several examples how to use this script. Embed Lottie Player in Axure RP.rp (89.4 KB)

https://uu95co.axshare.com/

image
image.png1964×1248 289 KB