ncanarelli

I've updated the original codepen to reflect what I am experiencing: https://codepen.io/ncanarelli/pen/wvaeLNa

Wow you're an absolute legend! This is exactly what I was looking for.. However, it appears that only the first two .svg-animation div's are triggered. When I continue to scroll the remaining are already displayed. Do you see any issues with my .each loop that would prevent this from initiating the way it's supposed to?

I'm newer to working with SVG animations so I apologize in advanced if there is a straightforward answer to this. With a combination of utilizing Scrollmajic.js and GASP I was able to get the SVG to animate when the user scrolls to a specific position. The issue i'm running into is that the animation converts it from a dashed line to a solid stroke. I've done some research and found that using a mask would be the best way to accomplish this though I'm a bit lost on how to approach this method and would love some direction/help. Thanks in advance! Codepen Example