Javascript 航路点动画触发器不再工作

我一直在我的网站登陆页的“关于”部分工作。我想在页面上的图像显示与条纹动画剪辑路径多边形。 问题是，动画是在加载页面时开始的，所以我使用Waypoint来触发动画，只有当大约70%的页面在屏幕上时。这是工作，但后来我可能弄乱了代码，现在它不再工作了。有人可以检查一下，告诉我哪里出了问题

HTML

JS

谢谢

<section
    id="about"
    class="about-area pt-50 pb-50"
    style="background: #231f20"
        >
            <div class="about-pg-img">
                    <img src="./assets/img/About.png" alt="">
            </div>
</section>

.about-pg-img {
    opacity: 0; 
}

.about-pg-img img {
    height: auto;
    width: 100%;
}

@keyframes polygon {
    0% {
    clip-path: polygon(0% 0%, 0% 0%, 20% 0%, 20% 0%, 38% 0%, 38% 0%, 64% 0%, 64% 0%, 81% 0%, 81% 0%, 100% 0%, 100% 0%);
    }
    
    40% {
    clip-path: polygon(0% 0%, 0% 100%, 27% 100%, 20% 0%, 38% 0%, 38% 0%, 64% 0%, 59% 100%, 78% 100%, 81% 0%, 100% 0%, 100% 0%);
    }

    75% {
    clip-path: polygon(0% 0%, 0% 100%, 27% 100%, 20% 0%, 38% 0%, 44% 100%, 59% 100%, 59% 100%, 78% 100%, 81% 0%, 100% 0%, 100% 0%);
    }

    100% {
    clip-path: polygon(0% 0%, 0% 100%, 27% 100%, 27% 100%, 44% 100%, 44% 100%, 59% 100%, 59% 100%, 78% 100%, 78% 100%, 100% 100%, 100% 0%);
    }
}

$('#about').waypoint(function() {
    $('.about-pg-img').css({
        animation: "polygon 1.5s",
        opacity: "1"
    });
    
},{offset: '70%'});