I've been searching (unsuccessfully) all over the internet on how to achieve a certain SVG path animation. I re-used a codepen by Chris Coyier, from his CSS Tricks article. In my edited version, I have achieved the desired effect, but very roughly, and it's a very "hack-through" method that it's definitely not efficient.
The pen: https://codepen.io/anon/pen/zEZpPK (Visualize in Chrome)
The idea: Animate an SVG stroke so that, it begins with length 0 (a dashOffset equal to the path total length), so there's nothing rendered. Then, decrease the dashOffset gradually untill the whole SVG stroke is revealed. So far, no problems, that is a pretty common effect in fact. But I want to add something extra: The "Starting point" of the stroke must also offset gradually, to achieve an effect like the one in the Pen.
The specific requirement, is that the stroke can pass by the starting point Twice, and that the stoke length reaches 100% as it passes the second time by the Starting point, like it does (not with presicion) in the Pen.
The way I achieved it: It's rather complicated to write it down. You can explore the Pen and see for yourself what I did. Perhaps for a better understanding you can edit the stroke color of the SVG with ID Layer_3 to something different from white and black to visualize how the animations fire. However, I'll try to explain:
I copied the original SVG and pasted it twice in the HTML file, so there were 3 SVGs in the document, each one on top of the other. The one in the middle, has a white stroke, the other 2 have a black stroke. This second SVG, the one in the middle, has an animation that lasts twice the time of the animation of the 1st SVG. Then, the 3rd SVG animation lasts the same as the 1st, but it has an animation delay of the same length the 1st animation completion time.
It's a very ineffective solution, but it works just fine to illustrate what I'm trying to achieve.
The question: Is there any way to achieve such effect? Having the stroke moving across the path as it increases in size till it reaches the full path length?
I have though maybe using TweenMax (GSAP) along the dashOffset animation to try morphing the SVG path gradually from a single anchor, to the fully constructed path, and have the dashOffset animation starting at minus .getTotalLength(), up to, zero. But the morphing effect isn't really what is needed, more like a slice function that takes a single anchor and adds more anchors (following the path data) until the path becomes a closed shape. But again, I have found no information about such effect.
Perhaps I'm facing a limitation with SVGs. However, if anyone has an idea or knows a website where this effect is described, please let me know.
