The headings will be defined in many different places, mostly in the theme and in the page content. So using JS as you have will be the most reliable approach.
A few things to note about enqueuing scripts:
- As your script uses jQuery, you need to pass jQuery as a dependency to make sure it loads after jQuery does so that it’s actually defined when it tries to run.
wp_enqueue_script( 'hjs', 'https://example.com/h.js', array( 'jquery' ) ); - jQuery in WordPress runs in noConflict mode, so you can’t just use the
$variable for the jQuery object. This article has more information.
Now all that aside, from looking at the codepen I’m not sure any of this is nessecary. For the ScrollOut settings it is targetting the data-splitting attribute like so:
ScrollOut({
targets: '[data-splitting]'
});
However, you can change that to instead just target all the headings instead of trying to add that data attribute to the headings first, like so:
ScrollOut({
targets: 'h1,h2,h3,h4'
});
And also updating what the Splitting.js target is, as per the options (the data-splitting attribute is just the default)
Splitting({
target: 'h1,h2,h3,h4'
});