DrawSVG path length calculation when preserveAspectRatio:none

[Caine]

Hello GSAP community!
I need help finding solution to correctly animate path using drawSVG; since svg has preserveAspectRatio:none in order to be responsive and fit its container, looks like drawSVG is not calculating path length right and finishes animation too soon.

Green line is the issue.
I've searched the forum and couldn't find any solution for this, any help is appreciated.

See the Pen VwNBzPB by gettonet (@gettonet) on CodePen

[Rodrigo]

Hi @Caine and welcome to the GSAP Forums!

 

Nothing wrong with the DrawSVG Plugin here actually. The issue, for lack of a better word, is that you're using the default easing function which is power1.out, that means the animation starts faster and then slows down at the end, you can check how easing functions work on our ease visualizer:

https://gsap.com/docs/v3/Eases

 

The other problem you're encountering is that even with a linear ease is that your path is not completely vertical and lineal, it has curves and a part that is horizontal, so what you need is to adapt the easing function to the shape of your path. Jack created a Path ease function that takes care of that, I forked your demo only with the green path to show you how easy it is:

See the Pen abxaoma by GreenSock (@GreenSock) on CodePen

 

Is worth mentioning that in order to make the helper function work, you have to include the MotionPath Plugin as well.

 

Hopefully this helps.

Happy Tweening!

 

 

[Caine]

Hi @Rodrigo and many thanks for your answer!
I understand your point, but while this affects easing, it does not resolve the issue.
Problem is, green line is fully drawn before scrollTrigger reaches end.
And I believe this is due to preserveAspectRatio:none, but this property must stay in order for the curve to be responsive and fit its parent container.
 

[Rodrigo]

Hi,

 

This is not a GSAP related issue but something else related with your path. IDK if the preserve ratio setting has something to do or not TBH.

 

I made this quick screen recording and you can see that the DrawSVG Plugin is doing it's work
https://i.imgur.com/Sd8Wz4R.mp4

 

As I mentioned this seems more related to your path rather than a GSAP specific issue. I'd look into that first and try to isolate just that path and take it from there.

 

Happy Tweening!

[Caine]

Quote

something else related with your path

Any hint? It's rather simple path.
Even in your video can be seen that path is fully drawn before scrollTrigger reaches end point.
I can see in Inspector that drawSVG is working until the end, but I don't understand why and where it got such big values from.

[PointC]

Using  preserveAspectRatio="none" and a vector effect of non-scaling-stroke is problematic. This was discussed in this thread:

 

I would probably come to the same conclusion as that thread and generate the curved line dynamically.

 

Happy tweening.

 

[Caine]

@PointC you are correct, after turning off vector-effect: non-scaling-stroke animation is working correctly.
So it is problematic after all.

[GreenSock]

That effect should be applied with an attribute, not a CSS stylesheet. That's more compatible and DrawSVG knows to look for that too. 

See the Pen dyLqXvX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that better? 

[Caine]

@GreenSock much better!
But still not there yet, if you open your pen so entire parent div is visible, you'll see that path is drawn in the end:

[Rodrigo]

Hi,

 

I'm afraid that even using vector-effect as an attribute still causes the same problem, here is a fork of the last demo without it:

See the Pen VwNGXZL by GreenSock (@GreenSock) on CodePen

 

Beyond that and dynamically adjust the path on screen resize (as suggested in the thread @PointC linked) I don't know what else can be done TBH.

 

Sorry I can't be of more assitance.

Happy Tweening!

[GreenSock]

Yeah, if you check the console there's a warning: 

Quote

Warning: <path> length cannot be measured when vector-effect is non-scaling-stroke and the element isn't proportionally scaled.

It's just not something that can be accommodated at this point - you've got your SVG set up to scale in a non-uniform way. Sorry, I wish there was a magic bullet I could offer.