Jump to content
Search Community

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

Fettabachi
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

Posted

Hello,

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.

 

Thanks

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

  • Solution
Posted

Hi,

 

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

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

//Good
<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
Posted

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
Posted

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

  • Like 2
Posted

Now it's obvious! Thank you.

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.
×
×
  • Create New...