how to Lottie / json animations?

[peterroden]

Hello I have been making vector animations using Cavalry App and would like to export them as a Lottie / JSON file and upload them as looping background video animations to page rows.
Does anyone know how to do this?

Thanks

[kalamakumaran]

Haven't tested out but you can try to:

1. Include the Lottie library in your project via CDN Link

<script src="lottie.min.js"></script>

2. Give the row you would like to assign the animation to a class oder id (e.g. #animation-container)

<script>
window.laytheme.on("newpageshown", function(){
const animationContainer = document.getElementById('animation-container'); // replace with your div ID
const animationData = {
  container: animationContainer,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'your-animation.json' // replace with the path to your Lottie JSON file
};

const animation = lottie.loadAnimation(animationData);
});
</script>

4. Add this to your Custom CSS

#animation-container {
  background-image: url("data:image/svg+xml;utf8," + encodeURIComponent(animationData.container.innerHTML));
}

to make the created SVG your background-image

Good luck ;)