Hi guys, I’ve been wanting to add animations to my web pages and apps for quite a while. I stumbled across LottieFiles recently (https://lottiefiles.com/) and they have tons of free to use animations. They also have a lottie files player which one can use to run the animations. I’ve attempted to incorporate this by creating a custom HTML form.
What I’m trying to do:
I’ve added a clone link to the app below. There is a LottieFrame component which I’ve created with a custom HTML form. I used the custom iFrame wrapper as inspiration. https://assets5.lottiefiles.com/packages/lf20_uNwwkb.json is the json url to the animation which I would like to use as the default animation. However, I’d also like to be able to change this from the properties panel or within the code itself.
<div class="iframe-wrapper">
<center style="font-style:italic; color:#888; margin: 3em;">
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_uNwwkb.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
</center>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script>
function setURL(url) {
$(this).find("lottie-player").attr("src", url);
}
</script>
Again, using the iFrame wrapper as inspiration I was able to add a url setter. However, whether I use it in the properties panel or within the code, It doesn’t update the animation. The new json url which I’m trying to use is this one: https://assets5.lottiefiles.com/packages/lf20_u5FXEt.json but it could be anyone from the LottieFiles site.
The clone link also contains a from called Test_File where I attempt to change the url of the the LottieFrame but to no success.
Could someone take a look at the clone link below and perhaps pick up where I’m going wrong?
Once that’s working, I’ll try add options to control the height and width of the LottieFrame as well as any other properties we might find useful.
Clone link:
https://anvil.works/build#clone:UT6W6KCXMPDYG4WY=TXJOLCC2TPVX6IHVSWI3METW