I have been using a Lottie animation which is triggered by mouseover on my Wordpress site. I noticed that the new version of Avada integrates Lottie directly in the theme. There was a lack of control editing interaction so I felt the best way to do this is to use javascript. I have created a hover effect which works exactly how I would like as a test: http://mango-media.eu/lottie-test/index.html. I have added lottie_svg.min.js and the same javascript, css and HTML to my Wordpress site but still get these errors:
let iconMenu = document.querySelector('.bodymovinanim');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://assets6.lottiefiles.com/packages/lf20_yqqcyyzd.json"
});
var directionMenu = 1;
iconMenu.addEventListener('mouseenter', (e) => { /* E R R O R */
animationMenu.setDirection(directionMenu);
animationMenu.play();
});
iconMenu.addEventListener('mouseleave', (e) => {
animationMenu.setDirection(-directionMenu);
animationMenu.play();
});
(index):162 Uncaught TypeError: Cannot read property 'addEventListener' of null
at (index):162
(anonymous) @ (index):162
[Violation] Forced reflow while executing JavaScript took 50ms
lottie_svg.min.js?ver=5.5.3:1 Uncaught TypeError: Cannot read property 'appendChild' of undefined
at SVGRenderer.configAnimation (lottie_svg.min.js?ver=5.5.3:1)
at AnimationItem.configAnimation (lottie_svg.min.js?ver=5.5.3:1)
at XMLHttpRequest.s.onreadystatechange (lottie_svg.min.js?ver=5.5.3:1)
SVGRenderer.configAnimation @ lottie_svg.min.js?ver=5.5.3:1
AnimationItem.configAnimation @ lottie_svg.min.js?ver=5.5.3:1
s.onreadystatechange @ lottie_svg.min.js?ver=5.5.3:1
XMLHttpRequest.send (async)
(anonymous) @ VM250:1
load @ lottie_svg.min.js?ver=5.5.3:1
AnimationItem.setParams @ lottie_svg.min.js?ver=5.5.3:1
t.loadAnimation @ lottie_svg.min.js?ver=5.5.3:1
loadAnimation @ lottie_svg.min.js?ver=5.5.3:1
(anonymous) @ (index):153
lottie.js?ver=5.7.1:1 [Violation] 'readystatechange' handler took 2064ms