Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tomw_uk

DrawSVG console error with non scaling strokes

Go to solution Solved by GreenSock,

Recommended Posts

Hi all,

 

I'm using the DrawSVG plugin with ScrollTrigger to animate a path on scroll. When I use a path with vector-effect="non-scaling-stroke" applied, I get this error in my browser's console. TypeError: undefined is not an object (evaluating 't._offsetPT.s'). Note, you won't see it in CodePen's console.

 

I've seen some other posts about issues with non proportionally scaled SVG, but I see this error even in my simple non-scaled example.

 

Any thoughts or pointers, greatly appreciated.

 

Many thanks,

Tom.

See the Pen gOwNYKe by tomwelch (@tomwelch) on CodePen

Link to comment
Share on other sites

hmmm... I think @GreenSock may need to take a look at this. I'm seeing some oddities here too. With a vector effect of non scaling stroke DrawSVG 3 doesn't seem to animate the path if I include a scale tween.

 

See the Pen d14ac7059d450c73e2ecb5ef2e361fef by PointC (@PointC) on CodePen

 

But this worked fine in GSAP 2.

See the Pen 050fbc398630fce52e11fa1b491a1013 by PointC (@PointC) on CodePen

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

3 hours ago, PointC said:

With a vector effect of non scaling stroke DrawSVG 3 doesn't seem to animate the path if I include a scale tween.

 

Interesting;

On my Desktop PC I'm seeing the same as @PointC mentioned, but on mobile (Samsung Galaxy Note 10, Samsung Internet) the path is being drawn, but there is no scale animation 🤔

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Yeah - good call @akapowl. I'm seeing that result on my iPad too. (draw but no scale). Weird.

  • Like 1
Link to comment
Share on other sites

  • Solution

Is it working better now (after clearing your cache)? There was a very particular edge case that I needed to work around in DrawSVGPlugin, requiring one line of conditional logic that I put into the next release, and you can preview it now on CodePen with the usual URL: https://assets.codepen.io/16327/DrawSVGPlugin3.min.js

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Drawing and scaling simultaneously on mobile and desktop for me 👍

Link to comment
Share on other sites

Looking good in all tests here. :)🙌

Link to comment
Share on other sites

That seems to have done the trick. Thanks for everyone's help, and @GreenSock for fixing it on a Sunday.

 

9 hours ago, GreenSock said:

There was a very particular edge case that I needed to work around in DrawSVGPlugin, requiring one line of conditional logic that I put into the next release

 

Any idea when that release might be? Or are you able to share the patch you put in place?

 

Thanks again all,

Tom

Link to comment
Share on other sites

On 1/25/2021 at 2:25 AM, tomw_uk said:

Any idea when that release might be? Or are you able to share the patch you put in place?

I shot it to you via email. Enjoy!

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

@GreenSock I'm running into the same issues, is there any way I could get the file as well?

Link to comment
Share on other sites

@dbrinker absolutely, I'd be happy to send it to you once you sign up for Club GreenSock. Just let me know once you do that and I'll send it your way. 👍

  • Like 3
Link to comment
Share on other sites

Ah, okay, that makes sense. Glad to see you're officially added now as a developer on that "Business Green" account. I shot you an email with the file. Enjoy!

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×