Hi,
I have a few Lottie animation icons, which a client supplied, on a website. One works perfectly (on Location page) but none of the others will animate.
I cannot work out why? Can you tell me why?
My settings are here and links in secure notes along with one lottie code
Hello @alandoyle,
Thanks for writing in! Please do check your Lottie code. There are cases that a quote is incorrect. We would love to check your element settings if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Thanks.
Hi Ruenel.
My client checked the code and thinks its fine.
I have added the various elements you required to the secure note here.
BTW, I tried this was a URL link as well and that didilt work.
Thanks for taking a look.
Hi @alandoyle,
I have checked the page and found the Lottie element is working fine. If you still have any issues and want us to look into them, please let us know about that.
NOTE: The given credentials do not work.
Thanks
Thanks. However, I cannot see the animations in Safari and Chrome? (Did clear the browser cache on both). Do you know why that is?
For example, both Lottie elements on this page are not animating in either browser: http://p2eastpoint.ie/about/
We can’t really tell what’s wrong with your Lottie code. We tested a few Lottie JSON on our end, and they worked correctly. Have you tried recreating the source files or using a different one?
Thanks Ismael.
I loaded the same code into this site and it work perfectly https://drawer.design/preview-lottie-animation/
I would assume if it worked here it should work in Cornerstone? Any ideas as to why it won’t?
Thanks for the info.
We are not really sure why it won’t work in the Lottie element. Does it work here https://lottiefiles.com/?
Have you tried selecting a different Renderer (HTML, Canvas)?
Please check the documentation for more info: https://theme.co/docs/lottie
Ismeal,
Yes it works on the website you recommended.
Yes, I’ve tried all the render options in the lottie element in Cornerstone - or, do you mean I should ask my client to render them differently?
Yes, I checked the documentation and it does not help. (That is mainly why I got in touch with you guys).
Any other ideas?
Can you share us the link to the lottiefiles.com file? Example: https://app.lottiefiles.com/share/97c56553-3ce2-4a61-b5f5-61e063471b43
We tried uploading it to both sites, but the file was not accepted on either, with the error: “lottie.json The file is not a valid Lottie animation.” The drawer.design just doesn’t respond at all when we try to upload the Lottie file.
This means the JSON or Lottie file is invalid. Unfortunately, we don’t know why it’s invalid.
How did you create the lottie animation?
I do not have any links to lottiefils.com. As previously mentioned, I did upload them to https://drawer.design/preview-lottie-animation/ and they worked perfectly. I just checked them on this site again they all work. Not too sure why you had an issue.
The files my client gave me can be downloaded from the link in the secure note. Hopefully this will help.
As far as I know the lotties files were created in After Effects. She told me they are just vectors lines or shapes with a few simple keyframes. No expressions and no rasterized imagery. She used an AF plugin called BodyMovin to export them.
I hope this helps more. Appreciate the help.
We tested the Lottie files, and they still don’t work as JSON in the Lottie element. What worked was uploading them to lottiefiles.com and using the Embed HTML code directly in a Text element instead of the Lottie element.
This is the embed HTML code:
<script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player src="https://lottie.host/c3af43a5-095e-4b8b-aaf4-abbd57f2580f/P1u8mznpOK.lottie" background="transparent" speed="1" style="width: 300px; height: 300px" loop autoplay></dotlottie-player>
This is the integration UI:
You may need to create your own account on lottiefiles and generate the embed html code.
Thank you for your patience.
Thanks for your help Ismael. Very much appreciated.
However, the lottie files do not work on my phone (iPhone). Also, this website is a subscription model once you go over 10 lottie files - which I will for this website as we need other colours. Unfortunately this isn’t the ideal solution.
Am I correct in understanding that the main problem is that these files are not correct json files? And, if they were they would work with Cornerstone no problem?
The JSON files are correct but they are not compatible with the Lottie element, probably due to the way they were created or exported. Other Lottie sources work fine, including the one we shared above. I don’t have experience creating Lottie animations myself, so I can’t tell you what’s wrong with them, unfortunately.
Thanks again Ismael. I appreciate the effort in trying to get this to work.
