Cannot get elements by ID in Lottie SVG

[B-u-s-h]

Thanks a lot for the script!

The scrolling works, but I would also like to add interactivity to the Lottie SVG elements with IDs:

let buttonLink = document.getElementById("titel");
buttonLink.style.cursor = "pointer";
buttonLink.addEventListener("click", () => { window.open("https://cognitograph.ch/index.php/bildungssystem-der-schweiz"); });

Although I can see that the element with the ID "titel" is loaded in the DOM, I cannot address it through javascript in the script.js.

My test case is here: http://cognitographik.ch/scrollottie/

Any help would really be appreciated.

[chrisgannon]

Your Lottie markup is not ready to access - you will need to add JS your code into an DOMLoaded event. This is what I use:

let animationWindow = select('#animationWindow'),
  anim = lottie.loadAnimation({
   container: animationWindow, 
   renderer: 'svg',
   loop: true,
   autoplay: true,
   path: 'your.json'
});

anim.addEventListener('DOMLoaded', onDOMLoaded);

function onDOMLoaded(e){ 
 //add your JS link code here
}

[B-u-s-h]

Thank you!

The select() didn't work in my case. But I got it working with:

let animationWindow = document.getElementById("animationWindow"); anim = lottie.loadAnimation({ container: animationWindow, renderer: 'svg', loop: false, autoplay: false, path: 'your.json' });

[chrisgannon]

Add yes sorry, select(... is my shortcut to document.querySelector(... - glad you got it working.