Jump to content
GreenSock

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

Draw dashed line using DrawSVGPlugin

Recommended Posts

Please see the Pen.

 

I use a <path /> with stroke-dasharray to create a dashed line. But then if I draw it with DrawSVGPlugin, it gives me a solid line. I know DrawSVGPlugin uses stroke-dasharray underneath. So is it even possible to draw a dashed line with GSAP? 

 

Thanks. 

See the Pen XWZgqZM by noahsong (@noahsong) on CodePen

Link to comment
Share on other sites

And a fork of your pen with that change.

 

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

 

Happy tweening.

:)

 

 

 

  • Like 1
Link to comment
Share on other sites

21 minutes ago, PointC said:

And a fork of your pen with that change.

 

 

 

 

Happy tweening.

:)

 

 

 

 

 

Thank you! I don't need yoyo and repeat. But I wrote the exact same code to my project but it animates out instead of animating in. Really scratching my head - do you know a possible cause?

Link to comment
Share on other sites

I used a from() tween in my fork of your demo. Did you happen to switch it to a .to() tween? Then it would animate from 100% → 0.

  • Like 1
Link to comment
Share on other sites

You can also use percentages:
 

gsap.fromTo(
  "#masker",
  { drawSVG: "0% 0%" },
  { drawSVG: "0% 100%", duration: 3 }
);

 

Link to comment
Share on other sites

5 minutes ago, PointC said:

I used a from() tween in my fork of your demo. Did you happen to switch it to a .to() tween? Then it would animate from 100% → 0.

That's exactly the cause... thanks!

  • Like 1
Link to comment
Share on other sites

Great - glad to hear it was something simple. Happy tweening and thanks for being a Club member. :)

 

  • 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.
×