Add interactivity to a Lottie-SVG element by JS

Lottie in Web
1

Hello
I would like to add interactivity on Lottie SVG elements by js.

I named the layer with the element in AE #test so that I can access it by getElementById.

Unfortunately, it doesn’t work. btTest is null.
Thank you a lot for any help!

Here is the lottie file:
https://www.cognitographik.ch/qualitaet-lottie2/test.html

Here is the code:

<button onclick="buttonFunction()">Click Me</button>

<lottie-player
  autoplay
  loop="false"
  mode="normal"
  id="firstLottie"
  src="https://www.cognitographik.ch/qualitaet-lottie2/data.json"
  background="transparent"
  speed="1"
  style="width: 50%; height: 50%"
></lottie-player>

<script>
  function buttonFunction() {
    let btTest = document.getElementById("test");
    btTest.style.cursor = "pointer";
  }

</script>
1 Like
2

Hello, @jehrler

To add interactivity to Lottie SVG elements with JavaScript, ensure the Lottie animation is fully loaded before accessing elements. Use the DOMLoaded event from Lottie to make changes to the SVG elements. Here’s a sample code snippet:

var lottiePlayer = document.getElementById(‘firstLottie’);
lottiePlayer.addEventListener(‘DOMLoaded’, function() {
var btTest = lottiePlayer.contentDocument.getElementById(‘test’);
if (btTest) {
btTest.style.cursor = “pointer”;
}
});

This code waits for the Lottie animation to load, then accesses the SVG element by its ID to add interactivity.

I hope it’s helpful to you.

Best Regard,
Angela Huey