为什么我的Javascript动画不能在Wordpress上工作？

Question

我遵循了一个伟大的教程，以实现'SVG文本路径动画‘在我的Wordpress网站上，但现在我完全卡住了。我的SVG和文本路径是工作的，但是javascript动画不工作。

您可以看到SVG路径和textPath“测试测试”这里，而没有任何工作动画。

下面是我使用WP头和页脚实现的代码:在标题中，我有以下内容：

<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>

我的身体里有这样的东西：

<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>

在CSS中，我有以下内容：

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);
    }
}

任何帮助都是非常感谢的。谢谢!

Answer 1

工作脚本

<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>