0

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
Jack
  • 15
  • 5
  • The error is telling you that when you call `iconMenu.addEventListener()`, `iconMenu` is `null`. The reason for that is `document.querySelector('.bodymovinanim');` returning `null`, which means the element doesn't exist yet when the script runs. The solution is to either add the script to the end of `` or to wrap it in a "document has loaded" event handler. – Chris G Nov 13 '20 at 13:43
  • Duplicate: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Chris G Nov 13 '20 at 13:44
  • @ChrisG - yes this makes sense, the way I enqueued the bodymovin.js file put it in my head.. do you know how I can add this to the end of my body tag in Wordpress? – Jack Nov 13 '20 at 13:46
  • Here's one way: https://wordpress.org/support/topic/how-to-inset-code-the-closing-tag/ You can also use jQuery: `jQuery(function () { /* your code here */ });` – Chris G Nov 13 '20 at 13:48
  • @ChrisG - adding the script at the bottom of the body is not working either, I have tried many ways of adding it there including footer scripts plugin, is there any other reason I could be getting these errors? – Jack Nov 13 '20 at 14:19
  • The other reason is of course that `document.querySelector('.bodymovinanim');` doesn't find the element because there's no element that has `class="bodymovinanim"`, maybe because you forgot the `g`? – Chris G Nov 13 '20 at 14:21
  • @ChrisG, no they are spelt the same which baffles me. This is the link to the site, maybe you could take a closer look please? https://treuvision.goldenerwesten.eu/ – Jack Nov 13 '20 at 14:24
  • When I inspect the error, which says "bodymovin is not defined", it points me to `let animationMenu = bodymovin.loadAnimation({`, and indeed, `bodymovin` isn't defined when that script runs. I guess the reason is that the lottie script is included in the footer and therefore `bodymovin` doesn't exist until then. Move the lottie script above your own code. – Chris G Nov 13 '20 at 14:27
  • @ChrisG - thank you, so I needed to move the javascript associated with lottie and the file above it at the bottom of the body. – Jack Nov 13 '20 at 14:33

0 Answers0