yPercent on SVG path

[Noetik]

Hello,
I am trying to animate yPercent on a SVG element but doesn't seem to work. Checked the console and doesn't seem to change anything.

xPercent (if uncomment it) works fine. Could you explain why in order to make the lines animate vertically?

See the Pen KwKVjXZ by Manolis-Tsalampounis (@Manolis-Tsalampounis) on CodePen.

[mvaneijgen]

That is probably due to the fact that a line has no height and you're trying to move the element 100% of 0, which is 0 and also 50% of 0 = 0, so there is no movement. 

 

You can how ever set y and just animate a pixel value that suites you. In the process of debugging this I'd removed some of your code and changed it to how I would set it up. By the way have you seen our helper functions https://gsap.com/docs/v3/GSAP/gsap.utils/ there is a random function build in to GSAP! Also instead of targeting each line, you can target them all at the same time and just set repeat: -1 and repeatRefresh: true,  to have to change the values each time. 

 

Hope it helps and happy tweening! 

 

See the Pen OPJMeKx?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

 

[Rodrigo]

Hi,

 

Just to complement what @mvaneijgen already mentioned you can inspect the line elements using the getBBox() method:

https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox

 

For every line you'll basically get this:

SVGRect {x: 0, y: 0, width: 2436.89990234375, height: 0}

Also you can check the Attributes Plugin in order to tween the x and y attributes of the line elements:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

 

But probably tweening the transform of the lines is enough as Mitchel's demo already shows.

 

Happy Tweening!

[Noetik]

Very helpful, thank you!