Lacika1981

svg dotted line turns to solid on animation

Recommended Posts

Hi,

 

I have got an issue.

I have an svg line element to animate.

Unfortunately it turns to a solid line on animation.

I have read few topics to solve the problem but could not.

This element has stroke, stroke-width and stroke-dasharray.

 

Is the problem with the svg element?

 

Thanks

 

Share this post


Link to post
Share on other sites

If I'm not mistaken ... you can't animate a dashed line because that is the very mechanism DrawSVG uses to simulate the drawing of a line ...

 

drawSVG Docs: It does this by controlling the stroke-dashoffsetand stroke-dasharray CSS properties.

https://greensock.com/drawSVG

 

But, you can emulate the desired presentation why using drawSVG on a series of lines,

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Yep, @Shaun Gorneau is exactly right. Another thing you could try is just animating a mask of a dashed line. 

 

I wouldn't be surprised if @PointC swings by and offers another suggestion, as he's done a lot in this realm. 

 

Happy tweening!

  • Like 1

Share this post


Link to post
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.