Jump to content
GreenSock

Nisha Prasad

Hello Team

Recommended Posts

As I am new to this Draw svg plugin so unable to work on required output. I have one svg file which should be drawn when user opens the page. Below are the 3 lines svg file. I want output like this :  ie how dotted lines are moving. But mine is not working. Is my svg file code is correct. Urgent help please.

line1.svg line2.svg line3.svg

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

Link to comment
Share on other sites

Hey there - sorry I don't understand what you're struggling with. This pen seems to be working fine.

If this isn't your pen and you want help with something else, could you create a minimal demo showing what you're tried so far?

Link to comment
Share on other sites

Yeah, that's one of my demos from this thread:

The first line is masked. The second one is animating the strokeDasharray. As @Cassie mentioned, they seem to work fine, so maybe you could put together a minimal demo of what you're attempting. 

 

Happy tweening.

  • Like 3
Link to comment
Share on other sites

Hello I have my dotted svg file which needs to be animated using drawsvg. Attaching my demo html file. My first dotted svg is not animating like other dashed line.

gsap-runner-box.html

Link to comment
Share on other sites

You can check from codepen the first svg is not animating. Do know whats the error in svg. 

See the Pen PoQGLwg by nisha_code (@nisha_code) on CodePen

Link to comment
Share on other sites

I think there's some core fundamentals missing here. 

All the other examples are animating a stroke which is inside an SVG mask. Whereas you're targeting multiple circle elements.

 

Quote

DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG element - It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties.

 

The way you're attempting it isn't going to work - it's a bit like trying to follow a music tutorial to play a song, but you're using a banana instead of a guitar. It's not an error in the SVG, it's the wrong SVG markup entirely.

 


It's definitely hard to see what's going on with masks though as they're invisible, so that's a tricky place to start trying to understand drawSVG. I've taken the path out of the mask here so you can see what's happening.

Does that make it a bit more clear to you what's going on? 

See the Pen WNMGBJB?editors=1010 by GreenSock (@GreenSock) on CodePen

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