Simple line animation

[Afplaktape]

Hi,

 

I'm fairly new to all this and can't seem to figure out what to do here. I try to create a line animation that originates from the center and draws this shape to the top and bottom of the screen (responsive on all viewports). There is something going on with the animation also starting somewhere in the left top (however in this preview it seems normal but within codepen it doesn't). I feel like it's not starting in the center and the stroke width for the vertical lines change on a narrow viewport. Any help in the right direction would be much appreciated! Thanks in afvance:)

 

See the Pen abyjNYJ by Afplaktape (@Afplaktape) on CodePen

[akapowl]

 

Hello @Afplaktape

 

Quote

DrawSVGPlugin3.min.js:13

Warning: <path> length cannot be measured when vector-effect is non-scaling-stroke and the element isn't proportionally scaled.

 

You've got a warning in the console about that.

 

I think, it's the combination of preserveAspectRatio="none" with vector-effect="non-scaling-stroke" making it impossible for drawSVG to measure the length of the path correctly.

 

You can see it work better if you remove that the none-scaling-stroke e.g.

 

See the Pen dymyMXm by akapowl (@akapowl) on CodePen

 

 

 

Now there are a couple of threads on that topic, but unfortunately I don't think there is an easy solution for how to make it possible for those to work together.

 

On 4/15/2022 at 10:41 AM, OSUblake said:

If your animation works the way you want, then don't worry about those warnings. If not, I'm pretty sure the only way to do a non-scaling stroke like that would be to recreate the path on every resize by transforming every single point the path. Definitely not trivial.

 

 

[Afplaktape]

Thanks! The only problem with deleting the vector-effect="non-scaling-stroke" is that it looks terrible on mobile. Do you know if there is a way to achieve a similar effect with masking?

[akapowl]

21 minutes ago, Afplaktape said:

The only problem with deleting the vector-effect="non-scaling-stroke" is that it looks terrible on mobile.

 

Yeah, I understand.

 

21 minutes ago, Afplaktape said:

Do you know if there is a way to achieve a similar effect with masking?

 

Nice thinking!  You can always try that yourself  

 

Looks like when you set the stroke-width of the mask path to just wide enough to not look weird when tweening around the corners but also not reveal some parts of the path when getting scaled down too much, you could pull it off. 

 

Maybe one of our SVG-Gurus even knows of a better approach for this - but this looks to be working quite alright

 

See the Pen YzazqMg by akapowl (@akapowl) on CodePen

 

[GreenSock]

Yep, seems like a good solution. Another way to do it (not "better") is to split it apart into the center horizontal line that you can animate the scaleX from 0 to 1 with transformOrigin: "50% 50%", and then the two vertical lines you could animate scaleY from 0 to 1 where their transformOrigin is appropriate (top for one, bottom on the other). No drawSVG needed at all in that case. 

 

I hope that helps.