Jump to content


DrawSVG doesn't animate the stroke on one of the lines

Moderator Tag
Go to solution Solved by Carl,

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


I'm mystified as to why the stroke on the red bar in my pen doesn't animate like the stroke on the white bar. The only difference I can see are the coordinates of the lines.



See the Pen PZjJWq?editors=101 by Fettabachi (@Fettabachi) on CodePen

Link to comment
Share on other sites

  • Solution



Thanks for the demo, it appears your red line was missing the x1 attribute.

<line id="rb_1" class="cls-1-rb"  y1="50" x2="3122.1" y2="50"/>

<line id="rb_1" class="cls-1-rb" x1="260.64"  y1="50" x2="3122.1" y2="50"/>

Please see this revised version: http://codepen.io/GreenSock/pen/wMrzpY?editors=110

  • Like 3
Link to comment
Share on other sites

Hi Fettabachi :),


the red line is just missing the x1 coordinate. Just change your SVG to this and it works just fine. :)

 <line id="rb_1" class="cls-1-rb" x1="260.64" y1="50" x2="3122.1" y2="50"/>
  • Like 1
Link to comment
Share on other sites

Haha - I come back after a few days off and Carl whoops me.  :-P

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