Trigger animation ligne svg sur la vue de l'écran et le réinitialiser vue hors écran

Question

here's a jsfiddle : 

https://jsfiddle.net/20zhrw1o/ 

Comme le dit le titre, je veux déclencher l'animation des lignes quand en vue écran et réinitialiser afin que si je défiler revenir l'animation démarre encore une fois, je ne suis pas bon à js alors merci pour toute aide aimable!

est-il également possible de le faire avec scrollreveal plugin?

Answer 1

Les animations CSS sont difficiles à contrôler directement via JavaScript (https://css-tricks.com/restart-css-animation/), il est donc préférable d'ajouter et de supprimer des classes CSS pour démarrer/réinitialiser l'animation.

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

Sur chaque événement scroll, voir si le SVG est affiché à l'écran:

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

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