grimpirate

@OSUblake Once again, thank you.

@OSUblake Thank you very much for the cogent explanation and different methodologies. Still learning all the nuances of Greensock, knowing that one definitely helps. As an aside, I did originally test by modifying the attribute (and tested with your code) but it did not produce the expected result. Fails to animate at all.

Came up with a procedure that functions in the expected manner, not sure how performant it is though: var path = document.querySelector('path'); TweenMax.set(path, {strokeDasharray: 1}); TweenMax.set(path, {strokeDashoffset: 1}); TweenMax.set(path, {attr:{pathLength: 1}}); TweenMax.to(path, 3, {onUpdate: function(tween) { path.style.strokeDashoffset=1-tween.progress(); }, onUpdateParams:["{self}"]}); I'm capitalizing on the fact that tween.progress() works on a number from 0 to 1.

@PointC Sorry if I wasn't clear on this point, but the SVG spec defines a pathLength attribute for SVGs. In terms of finding your position along a curve as a percentage, setting its length to 1 makes things very simple. I realize I could achieve the same percentage by utilizing javascript and dividing by getTotalLength(). Isn't there some way that Greensock can SOLELY alter the value as I demonstrated with the javascript code? I'm unsure as to what Greensock is doing behind the scenes, but if both the CSS and javascript approach work, why is Greensock failing? This is my actual question, not really seeking a workaround.

This demo pen illustrates how to animate the stroke-dashoffset attribute of an SVG in both CSS and via a javascript requestAnimationFrame() call (Microsoft Edge doesn't appear to support the pathLength attribute, but that's not particularly relevant). I attempted to animate with Greensock in the following manner: TweenMax.to('path', 6, {strokeDashoffset:0}); The only effect this seems to have is causing the curve to blink. I'm unsure if this is a result of using the pathLength attribute to normalize the curve length to 1. I realize this can be solved by DrawSVG plugin, but I'm curious as to why this fails. Thanks.