Jump to content
GreenSock

Afplaktape

Simple line animation

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

 

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.

 

 

  • Thanks 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

  • Thanks 1
Link to comment
Share on other sites

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. 

  • Like 1
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.
×