Caine Posted April 14 Share Posted April 14 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 15 Share Posted April 15 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! Link to comment Share on other sites More sharing options...
Caine Posted April 15 Author Share Posted April 15 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted April 15 Share Posted April 15 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! 1 Link to comment Share on other sites More sharing options...
Caine Posted April 15 Author Share Posted April 15 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. Link to comment Share on other sites More sharing options...
PointC Posted April 15 Share Posted April 15 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. 1 Link to comment Share on other sites More sharing options...
Caine Posted April 15 Author Share Posted April 15 @PointC you are correct, after turning off vector-effect: non-scaling-stroke animation is working correctly. So it is problematic after all. Link to comment Share on other sites More sharing options...
GreenSock Posted April 16 Share Posted April 16 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? Link to comment Share on other sites More sharing options...
Caine Posted April 16 Author Share Posted April 16 @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: 2024-04-16_11-36-59.mp4 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 16 Share Posted April 16 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! Link to comment Share on other sites More sharing options...
GreenSock Posted April 22 Share Posted April 22 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now