我正在使用Wordpress模板在我的网站上工作。我是一名UI设计师，但对编码的了解并不多，仅是基础知识。我希望有人能帮助我。
我在After Effects中制作了动画，并以JSON格式导出了动画。然后安装了一个名为“ Bodymovin”的插件，以将JSON文件呈现为SVG，CANVAS或HTML。您可以看到动画和受影响的页面 here 。 问题在于，当您向下滚动时，动画将被渲染两次（动画的滚动速度是标语的两倍）。 Here you can see what happens in the editor
这是来自后端的代码，用于创建标语并包含动画。
<h1 class="p1" style="text-align: center;"><span class="s1 type_second weight_light big-intro strokes">[bodymovin anim_id="8141" autoplay_viewport="true" width="100px" align="center"]@crossinghorizons</span></h1><p style="text-align: center;">Travel, portraiture and branding photography</p>
这是在页面上的编辑器中检查元素时代码的外观。
<div style="transform: translate3d(0px, 0px, 0px); opacity: 3.15; pointer-events: none; transition: all 0ms ease-out 0s;"><h1 class="p1" style="text-align: center"><span class="s1 type_second weight_light big-intro strokes"><div id="anim-5be9dfd07daf3" class="wpbdmv-animation align-center renderer-canvas playing" style="max-width: 100px; margin-right: auto; margin-left: auto; transform: translate3d(0px, 0px, 0px); opacity: 3.15; pointer-events: none; transition: all 0ms ease-out 0s;"><canvas width="200" height="142" style="width: 100%; height: 100%; transform-origin: 0px 0px 0px;"></canvas></div>@crossinghorizons</span></h1><p style="text-align: center">Travel, portraiture and branding photography</p>
我尝试了一些方法来修复它，但是找不到合适的解决方案，我希望有人知道出了什么问题以及如何解决。谢谢！