Trigger-svg Linie Animation auf dem Bildschirm Ansicht und setzen Sie ihn außerhalb des Bildschirms Ansicht

Question

here's a jsfiddle : 

https://jsfiddle.net/20zhrw1o/ 

Wie der Titel schon sagt, ich will Ansicht, welche die Linien Animation auszulösen, wenn in Bildschirm und es zurückgesetzt, so dass, wenn ich wieder die Animation beginnt, um es blättern wieder, ich bin nicht gut in js so vielen Dank für jede Art von Hilfe!

ist es auch möglich, dies mit scrollreveal Plugin zu tun?

Answer 1

CSS-Animationen können nur schwer direkt über JavaScript gesteuert werden (https://css-tricks.com/restart-css-animation/). Daher ist es besser, CSS-Klassen zum Starten/Zurücksetzen der Animation hinzuzufügen und zu entfernen.

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

Auf jedem scroll Ereignis finden, wenn der SVG auf dem Bildschirm ist:

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

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