Jump to content


Not working out DrawSVG plugin

Go to solution Solved by Ihatetomatoes,

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

Hi there,


I'm starting to use DrawSVG and I really can't make the drawing properly.


I read the tutorials and watched the videos a few times and all that I need is to make the drawing properly.


Firstly, I don't want the text coming up first, I want the drawing happening along the duration of the tween and revealing the text.



Please let me know what's is wrong with my pen.


It's an excellent plugin and we have the business club here at work, but I'm testing all the plugins before we place into our production.


Any help it will be great.



Kind regards,



Fernando Fas

See the Pen LkXxLm by fernandofas (@fernandofas) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Fernando, you have to target the individual paths inside of the SVG instead of the SVG itself.


Here is the updated CodePen:


See the Pen e3d7fc0fcc29b80c115fc7e6d4be97a3 by ihatetomatoes (@ihatetomatoes) on CodePen


Also note that I have set the TO value to be "100%" instead of 100, because the length of each letter is different.


100% will always animate the path to the full length.


Hope that helps.

  • Like 4
Link to comment
Share on other sites

Hi Petr,


Thanks to clarify it. Now I'm gonna do amazing stuff with the plugin.


You rock \m/.

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