[FIXED] Why is my Javascript animation not working in Wordpress?

Issue

I followed a great tutorial to implement an 'SVG text path animation' on my Wordpress website but now I'm totally stuck. My SVG and text path are working, but the javascript animation is not.

You can see the SVG path and textPath "Testing testing testing" here without any working animation.

Here is the code I've implemented using WP Headers and Footers: In the header I have the following:

<script>
    var textPath = document.querySelector('#text-path');
    
    function updateTextPathOffset(offset) {
        textPath.setAttribute('startOffset', offset);
    }
        
    function onScroll() {
        requestAnimationFrame(function() {
            updateTextPathOffset(window.scrollY * 1.5);
        });
    }
    
    window.addEventListener('scroll', onScroll);
        
</script>

In the body I have this:

<svg id="svg-path" xmlns="http://www.w3.org/2000/svg" width="1440" height="3500" xml:space="preserve">
    <path id="our-text" fill="none" stroke="#000" stroke-width="10" stroke-miterlimit="10" d="M1237.52 0v541.86c0 14.27-11.57 25.83-25.83 25.83H415.53c-14.27 0-25.83 11.57-25.83 25.83v365.73c0 14.27 11.57 25.83 25.83 25.83h252.68c14.27 0 25.83 11.57 25.83 25.83v200.51c0 14.27 11.57 25.83 25.83 25.83h339.64c14.27 0 25.83 11.57 25.83 25.83v270.08c0 14.27-11.57 25.83-25.83 25.83H228.57c-14.27 0-25.83 11.57-25.83 25.83v339.64c0 14.27 11.57 25.83 25.83 25.83h609.21c14.27 0 25.83 11.57 25.83 25.83v496.16c0 14.27-11.57 25.83-25.83 25.83H159.01c-14.27 0-25.83 11.57-25.83 25.83v287.47c0 14.27 11.57 25.83 25.83 25.83h1017.9c14.27 0 25.83 11.57 25.83 25.83v291.81c0 14.27-11.57 25.83-25.83 25.83H972.05c-14.27 0-25.83 11.57-25.83 25.83v100.51c0 14.27-11.57 25.83-25.83 25.83H424.22c-14.27 0-25.83 11.57-25.83 25.83V3500"></path>
    <text y="40" font-size="30" font-family="Montserrat, Arial">
        <textPath id="text-path" class="text" href="#our-text" startOffset="500">
            Testing testing testing
        </textPath>
    </text>
</svg>

And in CSS I have this:

svg#svg-path {max-width:100%; height:auto;}
.animate {animation: reveal 1s forwards;}
@keyframes reveal {
    from {
        opacity:0;
        transform: translateX(-180px);
    }
    to {
        opacity:1;
        transform: translateX(0);
    }
}

Any help is greatly appreciated. Thank you!

Solution

Working script

<script>
 jQuery(document).ready(function(){
var textPath = document.querySelector('#text-path');

function updateTextPathOffset(offset) {
    textPath.setAttribute('startOffset', offset);
}
    
function onScroll() {
    requestAnimationFrame(function() {
        updateTextPathOffset(window.scrollY * 1.5);
    });
}

window.addEventListener('scroll', onScroll);
});
</script>
    

Answered By - Vel

Answer Checked By - Katrina (PHPFixing Volunteer)