Jump to content


Problems with DRAWsvg PLugin in a TimelineMax

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Good evening,


We having some problem with Drawsvg Plugin.


I try to explain what is our problem:


In this case, I have a Timeline, with the three states of some button ( the labels "over", "out" and "cli" severaly). In the third state ( the last), it launch the event "click" to execute the code in the "cli" Label. But, as we could see in the developer inspector, the property stroke-dasharray has changed when the DrawSVG is doing when we don´t change this element (polyline class="st1") in anytime. In the inspector you can see this value:


stroke-dasharray: 0px, 999999px;



Here we put the URL of the codePen that I make like a example:



If you should take a look, and tell me which could be the problem, or error?


Thank you very much for yout support.



Best Regards!!



Rogelio Silván.






See the Pen rrdAJj by stoicom (@stoicom) on CodePen

Link to comment
Share on other sites

Hi Rushmore,


Welcome to the forums!


I appreciate that you might not find english easy to read or write but be certain that we are more than happy to help.


Thank you for the example pen, it does help a lot in the troubleshooting. The first thing I would say to you is that you have a bit too much code there that's redundant.


The second thing would be to ask you to try and explain in a bit more detail what is the effect you are looking for? I think showing you the DrawSVG intro video might not help a lot as you might struggle to understand what is being said.


But, in a nutshell, DrawSVG works by animating the stroke-dasharray and stroke-dashoffset properties and thus, that will be the probable root of your issue.


If I can understand what you are trying to achieve, I shall do my best to help you.


Here is my fork of your pen: Please note, this is not a solution but just to show you what you have as redundant code.


See the Pen rrvAxa?editors=0010 by dipscom (@dipscom) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi and welcome to the forums,


Thanks for the demo. For the future please try to label your elements in a way that is easier to understand.

It is very difficult to read code that targets elements by class names like ".st1, st0, .st3" we have no way of knowing what those are unless we go into the SVG which isn't very fun.


As I understand, it appears things are working properly. In line 12 you set the drawSVG value of the check mark to 0 (end of rollout animation) which sets the stroke-dasharray: 0px, 999999px; 



Line 16 is where the "cli" label is. So when you jump to "cli" it seems appropriate that the settings from line 12 (drawSVG:0) would still be in place.


In other words if you jump to a time of 3 seconds into a timeline it is going to honor all the tweens that came before.


I'm not exactly sure what the desired behavior is but you could try adding code at the "cli" label that would reveal the check mark again.

  • Like 2
Link to comment
Share on other sites

Nice explanation Carl! :)

  • Like 1
Link to comment
Share on other sites

Good morning,


  • Dipscom and Carl, thanks a lot for your support. We try to adding code at the "cli" and now works. I try to get better my Engish too.   :-P  


Best Regards.

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.