For anyone who doesn't know what Lottie is, it is a video player created by the AirBnB team that lets you play vector animation exported from Adobe After Effects. It exports as json-files that you can easily add to any web project. This is easy to upload in craft cms or include in a static website. However sometimes I have images included in the animation that needs to be linked correctly in the json-file.

I was just wondering if anyone else have encountered this problem and found a solution?

1 Answer 1


How are the images included in the json-file? Do you need upload the images as well? I assume, that you do have a problem with the image paths? Please describe your workflow and folder structure.

Frontend-Side you could always replace some strings via twig. In your case you could replace a path-segment from the json field.

  • Here is how I have solved it when there is no images {% for json in block.json.all() %} <div id="{{ json.filename | lower }}"></div> <script> var animation = bodymovin.loadAnimation({ container: document.getElementById('{{ json.filename | lower }}'), renderer: 'svg', loop: true, autoplay: true, path: '{{ json.getUrl() }}' }) </script> {% endfor %} I just upload the json-file and link to it here. Also I use the filename to target the div above the script. May 26, 2020 at 20:14
  • But when when there is images they actually need to be linked in the json-file so I guess uploading the file seperate from the twig file probably will not work? I need to add the json-data in the twig-file to be able to edit image paths. May 26, 2020 at 20:18
  • could you upload an example json file? May 27, 2020 at 8:18
  • When using lottiefiles.com I am able to upload a zip-file with the json-file and images to preview the animation. Uploading a zip like that in Craft CMS would be perfect if it was possible. Anyways here you can see a demo json-file: assets7.lottiefiles.com/packages/lf20_f1MCbZ/Lottie-2/demo.json And here is a preview of how the animation looks: lottiefiles.com/share/f1MCbZ May 28, 2020 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.