画面ビューでsvgラインアニメーションをトリガーしてスクリーンビューからリセットする

Question

タイトルが言うように、私はスクリーンビューでラインアニメーションをトリガーし、それをリセットしてアニメーションを開始するようにしたいもう一度、私はjsをよくしていないので、どんな種類の助けにも感謝します！

また、これはscrollrevealプラグインでも可能ですか？

Answer 1

CSSアニメーションはJavaScript（https://css-tricks.com/restart-css-animation/）で直接制御するのが難しいので、アニメーションを開始/リセットするCSSクラスを追加したり削除したりすることをお勧めします。 SVGがある場合、すべてのscrollイベントで

path { 
    stroke: #000; 
    stroke-width:2px; 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
} 
svg.in-view path { 
    animation: dash 20s linear forwards; 
} 

、参照画面上の：

window.addEventListener('scroll', function(e) { 
    svg.classList.toggle('in-view', isElementInViewport(svg)); 
}); 

https://jsfiddle.net/20zhrw1o/1/