Wavify javascript code not working in wordpress (Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null)

Question

Currently I was implementing TweenMax to use wavify in wordpress, but Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null. An error is output and the cause is unknown.

Page source

From this image, you can see that TweenMax and wavify have been loaded, but

in HTML

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs></defs><path id="myID" d=""/></svg>

in javascript



// For Vanilla JavaScript
var myWave = wavify( document.querySelector('#myId'), {
    height: 60,
  bones: 3,
  amplitude: 40,
  color: 'rgba(150, 97, 255, .8)',
  speed: .25

})

I have entered the code above. The TweenMax code is working, but wavify is not running. The error "Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null" Is output. Is there any possible cause?

Thank you very much.

I don't know TweenMax but there's no obvious configuration here tell TweenMax what its target is. Is it expecting some more script to set a variable, or some element on the page with a specific class or ID, or something else? — Rup
Or is this being called by some other script you're including, wavify? Can you see how that's calling TweenMax, and if the problem is in there? If you just needed to include the script then it looks like that's working fine. Do you have a wavify enqueue too, that depends on this one, and is that all set up correctly? — Rup
Thank you for answering. I implemented it referring to here. github.com/peacepostman/wavify According to this, the library loading required for wavify is <script src = "/ js / TweenMax.min.js"> </ script> <script src = "/ js / wavify / wavify.js"> </ script> Because it was wp_enqueue_script ('wavify', get_stylesheet_directory_uri (). '/ dist / js / wavify.js'); wp_enqueue_script ('TweenMax', 'https: //cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js', array ('jQuery'), true); I implemented it in the wp_enqueue_scripts function like this. — Kan Piko
The page you've linked to has TweenMax included first, then wavify. You've set these up so that wavify is in the header and TweenMax in the footer, so they'll be included in the wrong order. I'd switch the two enqueue lines over and make TweenMax a dependency of wavify the same way you have with jQuery already. Once you've made sure they are being included in the right order (check 'view source' on your page) then any more errors are going to be wavify or tweenmax, not WordPress. — Rup
As @Rup already points out, the order is important. But it sounds more like you are not referencing the target element correctly in your JavaScript code. Can you please add a screenshot of you JS code where it references the target element, and also a screenshot of the HTML element in the code? — Tokant

Kan Piko Kan Piko · Accepted Answer · 2020-05-10T12:16:30

window.onload = function () {
// For Vanilla JavaScript
var myWave = wavify (document.querySelector ('# myId'), (
   height: 100,
   bones: 3,
   amplitude: 40,
   color: 'rgba (150, 97, 255, .8)',
   speed: .25
})
}

I solved it by adding javascript code of wave in window.onload = function {}.

After all, it seems that it was the timing of reading.

Wavify javascript code not working in wordpress (Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null)

1 Answers