Including easing in progress()

[ghost23]

Hi,

 

for animating the strokeDasharray attribute in an svg element, i use the onUpdate callback and then progress(). Now i recognized, that progress is not including easing.

 

I have made a simplified example in the codepen, that does not use strokeDasharray, but simply position, the issue remains the same.

 

So my question is, how can i include the easing in my own animation, when using onUpdate?

See the Pen jEaOBV by anon (@anon) on CodePen

[Carl]

Hi Ghost23 and welcome to the GreenSock forums.

 

Thanks so much for providing the reduced demo. Very helpful.

 

The issue here is that progress() does not fluctuate based on the type of ease being used.

an ease only effects the values that are being tweened. The time() and progress() of a tween always move forward regardless of how the ease effects the values being tweened.

 

I modified your demo to illustrate this and also show you how you can tween the value of a proxy object and then apply it to whatever you want: http://codepen.io/GreenSock/pen/QwOjdK?editors=101

 

If you want more advanced control over animating svg strokes, you might find DrawSVGPlugin helpful: http://greensock.com/drawSVG

[ghost23]

Hi,

 

thanks for the tip. Will try that.